<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
     虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      
<section class="cover">
    
  <div class="cover-frame">
    <div class="bg-box">
      <img src="./images/tiger.jpg" alt="image frame" />
    </div>
    <div class="cover-inner text-center text-white">
      <h1><a href="/blog/">虎虎生辉</a></h1>
      <h2></h2>
      <div>
        
        <img
          src="./hu.png"
          class="cover-logo"
          alt="虎虎生辉"
        />
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="#main" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>

<div id="main">
  <section class="outer">
  <article class="articles">
    
    <h1 class="page-type-title"></h1>

    
    
    <article id="post-PACKa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/07/01/PACKa/"
    >包管理工具</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/07/01/PACKa/" class="article-date">
  <time datetime="2018-06-30T16:00:00.000Z" itemprop="datePublished">2018-07-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="包管理工具概述"><a href="#包管理工具概述" class="headerlink" title="包管理工具概述"></a>包管理工具概述</h1><blockquote>
<p>本门课程的前置知识：JavaScript、ES6、模块化、git<br>本门课程的所有代码均书写在 nodejs 环境中，不涉及浏览器环境</p>
</blockquote>
<h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><p><strong>模块（module）</strong></p>
<p>通常以单个文件形式存在的功能片段，入口文件通常称之为<strong>入口模块</strong>或<strong>主模块</strong></p>
<p><strong>库（library，简称lib）</strong></p>
<p>以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案</p>
<p><strong>包（package）</strong></p>
<p>包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等</p>
<p><img src="assets/2019-12-13-10-39-18.png"></p>
<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>CommonJS 的出现，使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函数、一个对象、一个配置等等均可以作为模块，这种细粒度的划分，是开发大型应用的基石。</p>
<p>为了解决在开发过程中遇到的常见问题，比如加密、提供常见的工具方法、模拟数据等等，一时间，在前端社区涌现了大量的第三方库。这些库使用 CommonJS 标准书写而成，非常容易使用。</p>
<p>然而，在下载使用这些第三方库的时候，遇到难以处理的问题：</p>
<ul>
<li><strong>下载过程繁琐</strong><ul>
<li>进入官网或 github 主页</li>
<li>找到并下载相应的版本</li>
<li>拷贝到工程的目录中</li>
<li>如果遇到有同名的库，需要更改名称</li>
</ul>
</li>
<li><strong>如果该库需要依赖其他库，还需要按照要求先下载其他库</strong></li>
<li><strong>开发环境中安装的大量的库如何在生产环境中还原，又如何区分</strong></li>
<li><strong>更新一个库极度麻烦</strong></li>
<li><strong>自己开发的库，如何在下一次开发使用</strong></li>
</ul>
<p><strong>以上问题，就是包管理工具要解决的问题</strong></p>
<h2 id="前端包管理器"><a href="#前端包管理器" class="headerlink" title="前端包管理器"></a>前端包管理器</h2><blockquote>
<p>本门课程讲解的包管理器<br>npm：重点<br>yarn：次重点<br>其他：了解</p>
</blockquote>
<p>几乎可以这样认为，前端所有的包管理器都是基于 npm 的，目前，npm 即是一个包管理器，也是其他包管理的基石</p>
<p>npm 全称为 node package manager，即 node 包管理器，它运行在 node 环境中，让开发者可以用简单的方式完成包的查找、安装、更新、卸载、上传等操作</p>
<blockquote>
<p>npm 之所以要运行在 node 环境，而不是浏览器环境，根本原因是因为浏览器环境无法提供下载、删除、读取本地文件的功能。而 node 属于服务器环境，没有浏览器的种种限制，理论上可以完全掌控运行 node 的计算机。</p>
</blockquote>
<p>npm 的出现，弥补了 node 没有包管理器的缺陷，于是很快，node 在安装文件中内置了 npm，当开发者安装好 node 之后，就自动安装了 npm，不仅如此，node 环境还专门为 npm 提供了良好的支持，使用 npm 下载的包更加方便了。</p>
<p>npm 由三部分组成：</p>
<ul>
<li>registry：入口<ul>
<li>可以把它想象成一个庞大的数据库</li>
<li>第三方库的开发者，将自己的库按照 npm 的规范，打包上传到数据库中</li>
<li>使用者通过统一的地址下载第三方包</li>
</ul>
</li>
<li>官网：<a target="_blank" rel="noopener" href="https://www.npmjs.com/">https://www.npmjs.com/</a><ul>
<li>查询包</li>
<li>注册、登录、管理个人信息</li>
</ul>
</li>
<li>CLI：command-line interface 命令行接口<ul>
<li>这一部分是本门课讲解的重点</li>
<li>安装好 npm 后，通过 CLI 来使用 npm 的各种功能</li>
</ul>
</li>
</ul>
<blockquote>
<p>node 和 npm 是互相成就的，node 的出现让 npm 火了，npm 的火爆带动了大量的第三方库的发展，很多优秀的第三方库打包上传到了 npm，这些第三方库又为 node 带来了大量的用户</p>
</blockquote>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/07/01/PACKa/" data-id="ckya9fc16000pygf663tl75d8"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/package/" rel="tag">package</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-MODULEd" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/06/26/MODULEd/"
    >模块化 ES6标准</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/06/26/MODULEd/" class="article-date">
  <time datetime="2018-06-25T16:00:00.000Z" itemprop="datePublished">2018-06-26</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="ES6模块化简介"><a href="#ES6模块化简介" class="headerlink" title="ES6模块化简介"></a>ES6模块化简介</h1><p>ECMA组织参考了众多社区模块化标准，终于在2015年，随着ES6发布了官方的模块化标准，后成为ES6模块化</p>
<p>ES6模块化具有以下的特点</p>
<ol>
<li>使用依赖<strong>预声明</strong>的方式导入模块<ol>
<li>依赖延迟声明<ol>
<li>优点：某些时候可以提高效率</li>
<li>缺点：无法在一开始确定模块依赖关系（比较模糊）</li>
</ol>
</li>
<li>依赖预声明<ol>
<li>优点：在一开始可以确定模块依赖关系</li>
<li>缺点：某些时候效率较低</li>
</ol>
</li>
</ol>
</li>
<li>灵活的多种导入导出方式</li>
<li>规范的路径表示法：所有路径必须以./或../开头</li>
</ol>
<h1 id="基本导入导出"><a href="#基本导入导出" class="headerlink" title="基本导入导出"></a>基本导入导出</h1><h2 id="模块的引入"><a href="#模块的引入" class="headerlink" title="模块的引入"></a>模块的引入</h2><p><strong>注意：这一部分非模块化标准</strong></p>
<p>目前，浏览器使用以下方式引入一个ES6模块文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;入口文件&quot;</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="模块的基本导出和导入"><a href="#模块的基本导出和导入" class="headerlink" title="模块的基本导出和导入"></a>模块的基本导出和导入</h2><p>ES6中的模块导入导出分为两种：</p>
<ol>
<li>基本导入导出</li>
<li>默认导入导出</li>
</ol>
<p><img src="assets/2019-12-03-17-00-44.png"></p>
<h3 id="基本导出"><a href="#基本导出" class="headerlink" title="基本导出"></a>基本导出</h3><p>类似于 <code>exports.xxx = xxxx</code></p>
<p>基本导出可以有多个，每个必须有名称</p>
<p>基本导出的语法如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> 声明表达式</span><br></pre></td></tr></table></figure>

<p>或</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123;具名符号&#125;</span><br></pre></td></tr></table></figure>

<p>由于基本导出必须具有名称，所以要求导出内容必须跟上<strong>声明表达式</strong>或<strong>具名符号</strong></p>
<h3 id="基本导入"><a href="#基本导入" class="headerlink" title="基本导入"></a>基本导入</h3><p>由于使用的是<strong>依赖预加载</strong>，因此，导入任何其他模块，导入代码必须放置到所有代码之前</p>
<p>对于基本导出，如果要进行导入，使用下面的代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;导入的符号列表&#125; <span class="keyword">from</span> <span class="string">&quot;模块路径&quot;</span> </span><br></pre></td></tr></table></figure>

<p>注意以下细节：</p>
<ul>
<li>导入时，可以通过关键字<code>as</code>对导入的符号进行重命名</li>
<li>导入时使用的符号是常量，不可修改</li>
<li>可以使用*号导入所有的基本导出，形成一个对象</li>
</ul>
<h1 id="默认导入导出"><a href="#默认导入导出" class="headerlink" title="默认导入导出"></a>默认导入导出</h1><p><img src="assets/2019-12-03-17-00-44.png"></p>
<h2 id="默认导出"><a href="#默认导出" class="headerlink" title="默认导出"></a>默认导出</h2><p>每个模块，除了允许有多个基本导出之外，还允许有一个默认导出</p>
<p>默认导出类似于CommonJS中的<code>module.exports</code>，由于只有一个，因此无需具名</p>
<p>具体的语法是</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> 默认导出的数据</span><br></pre></td></tr></table></figure>

<p>或</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123;默认导出的数据 <span class="keyword">as</span> <span class="keyword">default</span>&#125;</span><br></pre></td></tr></table></figure>

<p>由于每个模块仅允许有一个默认导出，因此，每个模块不能出现多个默认导出语句</p>
<h2 id="默认导入"><a href="#默认导入" class="headerlink" title="默认导入"></a>默认导入</h2><p>需要想要导入一个模块的默认导出，需要使用下面的语法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> 接收变量名 <span class="keyword">from</span> <span class="string">&quot;模块路径&quot;</span></span><br></pre></td></tr></table></figure>

<p>类似于CommonJS中的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 接收变量名 = <span class="built_in">require</span>(<span class="string">&quot;模块路径&quot;</span>)</span><br></pre></td></tr></table></figure>

<p>由于默认导入时变量名是自行定义的，因此没有别名一说</p>
<p>如果希望同时导入某个模块的默认导出和基本导出，可以使用下面的语法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> 接收默认导出的变量, &#123;接收基本导出的变量&#125; <span class="keyword">from</span> <span class="string">&quot;模块路径&quot;</span></span><br></pre></td></tr></table></figure>

<p>注：如果使用*号，会将所有基本导出和默认导出聚合到一个对象中，默认导出会作为属性default存在</p>
<h1 id="ES6模块化的其他细节"><a href="#ES6模块化的其他细节" class="headerlink" title="ES6模块化的其他细节"></a>ES6模块化的其他细节</h1><ol>
<li><strong>尽量导出不可变值</strong></li>
</ol>
<p>当导出一个内容时，尽量保证该内容是不可变的（大部分情况都是如此）</p>
<p>因为，虽然导入后，无法更改导入内容，但是在导入的模块内部却有可能发生更改，这将导致一些无法预料的事情发生</p>
<ol start="2">
<li><strong>可以使用无绑定的导入用于执行一些初始化代码</strong></li>
</ol>
<p>如果我们只是想执行模块中的一些代码，而不需要导入它的任何内容，可以使用无绑定的导入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&quot;模块路径&quot;</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li><strong>可以使用绑定再导出，来重新导出来自另一个模块的内容</strong></li>
</ol>
<p>有的时候，我们可能需要用一个模块封装多个模块，然后有选择的将多个模块的内容分别导出，可以使用下面的语法轻松完成</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> &#123;绑定的标识符&#125; <span class="keyword">from</span> <span class="string">&quot;模块路径&quot;</span></span><br></pre></td></tr></table></figure>

<p><img src="assets/2019-12-04-14-33-14.png"></p>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/06/26/MODULEd/" data-id="ckya9fc14000kygf6dowl29tg"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/moudle/" rel="tag">moudle</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-MODULEc" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/06/21/MODULEc/"
    >模块化 AMD与CMD标准</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/06/21/MODULEc/" class="article-date">
  <time datetime="2018-06-20T16:00:00.000Z" itemprop="datePublished">2018-06-21</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="浏览器端模块化的难题"><a href="#浏览器端模块化的难题" class="headerlink" title="浏览器端模块化的难题"></a>浏览器端模块化的难题</h1><p><strong>CommonJS的工作原理</strong></p>
<p>当使用<code>require(模块路径)</code>导入一个模块时，node会做以下两件事情（不考虑模块缓存）：</p>
<ol>
<li>通过模块路径找到本机文件，并读取文件内容</li>
<li>将文件中的代码放入到一个函数环境中执行，并将执行后module.exports的值作为require函数的返回结果</li>
</ol>
<p>正是这两个步骤，使得CommonJS在node端可以良好的被支持</p>
<p>可以认为，<strong>CommonJS是同步的</strong>，必须要等到加载完文件并执行完代码后才能继续向后执行</p>
<p><strong>当浏览器遇到CommonJS</strong></p>
<p>当想要把CommonJS放到浏览器端时，就遇到了一些挑战</p>
<ol>
<li>浏览器要加载JS文件，需要远程从服务器读取，而网络传输的效率远远低于node环境中读取本地文件的效率。由于CommonJS是同步的，这会极大的降低运行性能</li>
<li>如果需要读取JS文件内容并把它放入到一个环境中执行，需要浏览器厂商的支持，可是浏览器厂商不愿意提供支持，最大的原因是CommonJS属于社区标准，并非官方标准</li>
</ol>
<p><strong>新的规范</strong></p>
<p>基于以上两点原因，浏览器无法支持模块化</p>
<p>可这并不代表模块化不能在浏览器中实现</p>
<p>要在浏览器中实现模块化，只要能解决上面的两个问题就行了</p>
<p>解决办法其实很简单：</p>
<ol>
<li>远程加载JS浪费了时间？做成异步即可，加载完成后调用一个回调就行了</li>
<li>模块中的代码需要放置到函数中执行？编写模块时，直接放函数中就行了</li>
</ol>
<p>基于这种简单有效的思路，出现了AMD和CMD规范，有效的解决了浏览器模块化的问题。</p>
<h1 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h1><p>全称是Asynchronous Module Definition，即异步模块加载机制</p>
<p>require.js实现了AMD规范</p>
<p>在AMD中，导入和导出模块的代码，都必须放置在define函数中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">define([依赖的模块列表], <span class="function"><span class="keyword">function</span>(<span class="params">模块名称列表</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//模块内部的代码</span></span><br><span class="line">    <span class="keyword">return</span> 导出的内容</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h1><p>全称是Common Module Definition，公共模块定义规范</p>
<p>sea.js实现了CMD规范</p>
<p>在CMD中，导入和导出模块的代码，都必须放置在define函数中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">define(<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">require</span>, <span class="built_in">exports</span>, <span class="built_in">module</span></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//模块内部的代码</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/06/21/MODULEc/" data-id="ckya9fc13000iygf664e2dm7d"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/moudle/" rel="tag">moudle</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-MODULEb" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/06/16/MODULEb/"
    >模块化 CommonJS标准</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/06/16/MODULEb/" class="article-date">
  <time datetime="2018-06-15T16:00:00.000Z" itemprop="datePublished">2018-06-16</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h1><p>在nodejs中，由于有且仅有一个入口文件（启动文件），而开发一个应用肯定会涉及到多个文件配合，因此，nodejs对模块化的需求比浏览器端要大的多</p>
<p><img src="assets/2019-12-02-11-15-01.png"></p>
<p>由于nodejs刚刚发布的时候，前端没有统一的、官方的模块化规范，因此，它选择使用社区提供的CommonJS作为模块化规范</p>
<p>在学习CommonJS之前，首先认识两个重要的概念：<strong>模块的导出</strong>和<strong>模块的导入</strong></p>
<h2 id="模块的导出"><a href="#模块的导出" class="headerlink" title="模块的导出"></a>模块的导出</h2><p>要理解模块的导出，首先要理解模块的含义</p>
<p>什么是模块？</p>
<p>模块就是一个JS文件，它实现了一部分功能，并隐藏自己的内部实现，同时提供了一些接口供其他模块使用</p>
<p>模块有两个核心要素：<strong>隐藏</strong>和<strong>暴露</strong></p>
<p>隐藏的，是自己内部的实现</p>
<p>暴露的，是希望外部使用的接口</p>
<p>任何一个正常的模块化标准，都应该默认隐藏模块中的所有实现，而通过一些语法或api调用来暴露接口</p>
<p><strong>暴露接口的过程即模块的导出</strong></p>
<p><img src="assets/2019-12-02-11-27-12.png"></p>
<h2 id="模块的导入"><a href="#模块的导入" class="headerlink" title="模块的导入"></a>模块的导入</h2><p>当需要使用一个模块时，使用的是该模块暴露的部分（导出的部分），隐藏的部分是永远无法使用的。</p>
<p><strong>当通过某种语法或api去使用一个模块时，这个过程叫做模块的导入</strong></p>
<h2 id="CommonJS规范"><a href="#CommonJS规范" class="headerlink" title="CommonJS规范"></a>CommonJS规范</h2><p>CommonJS使用<code>exports</code>导出模块，<code>require</code>导入模块</p>
<p>具体规范如下：</p>
<ol>
<li>如果一个JS文件中存在<code>exports</code>或<code>require</code>，该JS文件是一个模块</li>
<li>模块内的所有代码均为隐藏代码，包括全局变量、全局函数，这些全局的内容均不应该对全局变量造成任何污染</li>
<li>如果一个模块需要暴露一些API提供给外部使用，需要通过<code>exports</code>导出，<code>exports</code>是一个空的对象，你可以为该对象添加任何需要导出的内容</li>
<li>如果一个模块需要导入其他模块，通过<code>require</code>实现，<code>require</code>是一个函数，传入模块的路径即可返回该模块导出的整个内容</li>
</ol>
<h2 id="nodejs对CommonJS的实现"><a href="#nodejs对CommonJS的实现" class="headerlink" title="nodejs对CommonJS的实现"></a>nodejs对CommonJS的实现</h2><p>为了实现CommonJS规范，nodejs对模块做出了以下处理</p>
<ol>
<li><p>为了保证高效的执行，仅加载必要的模块。nodejs只有执行到<code>require</code>函数时才会加载并执行模块</p>
</li>
<li><p>为了隐藏模块中的代码，nodejs执行模块时，会将模块中的所有代码放置到一个函数中执行，以保证不污染全局变量。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//模块中的代码</span></span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure></li>
<li><p>为了保证顺利的导出模块内容，nodejs做了以下处理</p>
<ol>
<li>在模块开始执行前，初始化一个值<code>module.exports = &#123;&#125;</code></li>
<li><code>module.exports</code>即模块的导出值</li>
<li>为了方便开发者便捷的导出，nodejs在初始化完<code>module.exports</code>后，又声明了一个变量<code>exports = module.exports</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">module</span>.exports = &#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> <span class="built_in">exports</span> = <span class="built_in">module</span>.exports;</span><br><span class="line">    <span class="comment">//模块中的代码</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">module</span>.exports;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure></li>
<li><p>为了避免反复加载同一个模块，nodejs默认开启了模块缓存，如果加载的模块已经被加载过了，则会自动使用之前的导出结果</p>
</li>
</ol>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/06/16/MODULEb/" data-id="ckya9fc14000lygf67p0dg7vp"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/moudle/" rel="tag">moudle</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-MODULEa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/06/11/MODULEa/"
    >模块化 发展史</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/06/11/MODULEa/" class="article-date">
  <time datetime="2018-06-10T16:00:00.000Z" itemprop="datePublished">2018-06-11</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="JavaScript-模块化发展史-ignore"><a href="#JavaScript-模块化发展史-ignore" class="headerlink" title="JavaScript 模块化发展史 {ignore}"></a>JavaScript 模块化发展史 {ignore}</h1><h2 id="第一阶段"><a href="#第一阶段" class="headerlink" title="第一阶段"></a>第一阶段</h2><p>在 JavaScript 语言刚刚诞生的时候，它仅仅用于实现页面中的一些小效果</p>
<p>那个时候，一个页面所用到的 JS 可能只有区区几百行的代码</p>
<p>在这种情况下，语言本身所存在的一些缺陷往往被大家有意的忽略，因为程序的规模实在太小，只要开发人员小心谨慎，往往不会造成什么问题</p>
<p>在这个阶段，也不存在专业的前端工程师，由于前端要做的事情实在太少，因此这一部分工作往往由后端工程师顺带完成</p>
<p>第一阶段发生的大事件：</p>
<ul>
<li>1996年，NetScape将JavaScript语言提交给欧洲的一个标准制定阻止ECMA（欧洲计算机制造商协会）</li>
<li>1998年，NetScape在与微软浏览器IE的竞争中失利，宣布破产</li>
</ul>
<h2 id="第二阶段"><a href="#第二阶段" class="headerlink" title="第二阶段"></a>第二阶段</h2><p>ajax的出现，逐渐改变了 JavaScript 在浏览器中扮演的角色。现在，它不仅可以实现小的效果，还可以和服务器之间进行交互，以更好的体验来改变数据</p>
<p>JS代码的数量开始逐渐增长，从最初的几百行，到后来的几万行，前端程序逐渐变得复杂</p>
<p>后端开发者压力逐渐增加，致使一些公司开始招募专业的前端开发者</p>
<p>但此时，前端开发者的待遇远不及后端开发者，因为前端开发者承担的开发任务相对于后端开发来说，还是比较简单的，通过短短一个月的时间集训，就可以成为满足前端开发的需要</p>
<p>究其根本原因，是因为前端开发还有几个大的问题没有解决，这些问题都严重的制约了前端程序的规模进一步扩大：</p>
<ol>
<li><strong>浏览器解释执行JS的速度太慢</strong></li>
<li><strong>用户端的电脑配置不足</strong></li>
<li>更多的代码带来了全局变量污染、依赖关系混乱等问题</li>
</ol>
<p>上面三个问题，就像是阿喀琉斯之踵，成为前端开发挥之不去的阴影和原罪。</p>
<p>在这个阶段，前端开发处在一个非常尴尬的境地，它在传统的开发模式和前后端分离之间无助的徘徊</p>
<p>第二阶段的大事件：</p>
<ol>
<li>IE浏览器制霸市场后，几乎不再更新</li>
<li>ES4.0流产，导致JS语言10年间几乎毫无变化</li>
<li>2008年ES5发布，仅解决了一些 JS API 不足的糟糕局面</li>
</ol>
<h2 id="第三阶段"><a href="#第三阶段" class="headerlink" title="第三阶段"></a>第三阶段</h2><p>时间继续向前推移，到了2008年，谷歌的 V8 引擎发布，将JS的执行速度推上了一个新的台阶，甚至可以和后端语言媲美。</p>
<p>摩尔定律持续发酵，个人电脑的配置开始飞跃</p>
<p>突然间，制约前端发展的两大问题得以解决，此时，只剩下最后一个问题还在负隅顽抗，即<strong>全局变量污染和依赖混乱</strong>的问题，解决了它，前端便可以突破一切障碍，未来无可限量。</p>
<p>于是，全世界的前端开发者在社区中激烈的讨论，想要为这个问题寻求解决之道……</p>
<p>2008年，有一个名叫 Ryan Dahl 小伙子正在为一件事焦头烂额，它需要在服务器端手写一个高性能的web服务，该服务对于性能要求之高，以至于目前市面上已有的web服务产品都满足不了需求。</p>
<p>经过分析，它确定，如果要实现高性能，那么必须要尽可能的减少线程，而要减少线程，避免不了要实用异步的处理方案。</p>
<p>一开始，他打算自己实用C/C++语言来编写，可是这一过程实在太痛苦。</p>
<p>就在他一筹莫展的时候，谷歌 V8 引擎的发布引起了他的注意，他突然发现，JS不就是最好的实现web服务的语言吗？它天生就是单线程，并且是基于异步的！有了V8引擎的支撑，它的执行速度完全可以撑起一个服务器。而且V8是鼎鼎大名的谷歌公司发布的，谷歌一定会不断的优化V8，有这种又省钱又省力的好事，我干嘛还要自己去写呢？</p>
<p>于是，它基于开源的V8引擎，对源代码作了一些修改，便快速的完成了该项目。</p>
<p>2009年，Ryan推出了该web服务项目，命名为nodejs。</p>
<p>从此，JS第一次堂堂正正的入主后端，不再是必须附属于浏览器的“玩具”语言了。</p>
<p>也是从此刻开始，人们认识到，JS（ES）是一门真正的语言，它依附于运行环境（运行时）（宿主程序）而执行</p>
<p><img src="assets/2019-11-28-15-45-47.png"></p>
<p>nodejs的诞生，便把JS中的最后一个问题放到了台前，即<strong>全局变量污染和依赖混乱</strong>问题</p>
<p>要直到，nodejs是服务器端，如果不解决这个问题，分模块开发就无从实现，而模块化开发是所有后端程序必不可少的内容</p>
<p>经过社区的激烈讨论，最终，形成了一个模块化方案，即鼎鼎大名的CommonJS，该方案，彻底解决了全局变量污染和依赖混乱的问题</p>
<p>该方案一出，立即被nodejs支持，于是，nodejs成为了第一个为JS语言实现模块化的平台，为前端接下来的迅猛发展奠定了实践基础</p>
<p>该阶段发生的大事件：</p>
<ul>
<li>2008年，V8发布</li>
<li>IE的市场逐步被 firefox 和 chrome 蚕食，现已无力回天</li>
<li>2009年，nodejs发布，并附带commonjs模块化标准</li>
</ul>
<h2 id="第四阶段"><a href="#第四阶段" class="headerlink" title="第四阶段"></a>第四阶段</h2><p>CommonJS的出现打开了前端开发者的思路</p>
<p>既然后端可以使用模块化的JS，作为JS语言的老东家浏览器为什么不行呢？</p>
<p>于是，开始有人想办法把CommonJS运用到浏览器中</p>
<p>可是这里面存在诸多的困难（课程中详解）</p>
<p>办法总比困难多，有些开发者就想，既然CommonJS运用到浏览器困难，我们干嘛不自己重新定一个模块化的标准出来，难道就一定要用CommonJS标准吗？</p>
<p>于是很快，AMD规范出炉，它解决的问题和CommonJS一样，但是可以更好的适应浏览器环境</p>
<p>相继的，CMD规范出炉，它对AMD规范进行了改进</p>
<p>这些行为，都受到了ECMA官方的密切关注……</p>
<p>2015年，ES6发布，它提出了官方的模块化解决方案 —— ES6 模块化</p>
<p>从此以后，模块化成为了JS本身特有的性质，这门语言终于有了和其他语言较量的资本，成为了可以编写大型应用的正式语言</p>
<p>于此同时，很多开发者、技术厂商早已预见到JS的无穷潜力，于是有了下面的故事</p>
<ul>
<li>既然JS也能编写大型应用，那么自然也需要像其他语言那样有解决复杂问题的开发框架<ul>
<li>Angular、React、Vue等前端开发框架出现</li>
<li>Express、Koa等后端开发框架出现</li>
<li>各种后端数据库驱动出现</li>
</ul>
</li>
<li>要开发大型应用，自然少不了各种实用的第三方库的支持<ul>
<li>npm包管理器出现，实用第三方库变得极其方便</li>
<li>webpack等构建工具出现，专门用于打包和部署</li>
</ul>
</li>
<li>既然JS可以放到服务器环境，为什么不能放到其他终端环境呢？<ul>
<li>Electron发布，可以使用JS语言开发桌面应用程序</li>
<li>RN和Vuex等技术发布，可以使用JS语言编写移动端应用程序</li>
<li>各种小程序出现，可以使用JS编写依附于其他应用的小程序</li>
<li>目前还有很多厂商致力于将JS应用到各种其他的终端设备，最终形成大前端生态</li>
</ul>
</li>
</ul>
<blockquote>
<p>可以看到，模块化的出现，是JS通向大型应用的基石，学习好模块化，变具备了编写大型应用的基本功。</p>
</blockquote>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/06/11/MODULEa/" data-id="ckya9fc15000mygf663c28jf4"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/moudle/" rel="tag">moudle</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-GITa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/06/01/GITa/"
    >Git 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/06/01/GITa/" class="article-date">
  <time datetime="2018-05-31T16:00:00.000Z" itemprop="datePublished">2018-06-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、分布式版本控制工具"><a href="#一、分布式版本控制工具" class="headerlink" title="一、分布式版本控制工具"></a>一、分布式版本控制工具</h1><h2 id="（一）使用"><a href="#（一）使用" class="headerlink" title="（一）使用"></a>（一）使用</h2><h3 id="1-初始化本地仓库"><a href="#1-初始化本地仓库" class="headerlink" title="1.初始化本地仓库"></a>1.初始化本地仓库</h3><blockquote>
<p>git init</p>
</blockquote>
<h3 id="2-创建秘钥、查看、配置"><a href="#2-创建秘钥、查看、配置" class="headerlink" title="2.创建秘钥、查看、配置"></a>2.创建秘钥、查看、配置</h3><blockquote>
<p>ssh-keygen<br>cd ~/.ssh<br>ls</p>
</blockquote>
<ul>
<li>copy id_rsa.pub into gitHub/Settings/SSH and GPG keys/Key</li>
</ul>
<h3 id="3-关联远程仓库"><a href="#3-关联远程仓库" class="headerlink" title="3.关联远程仓库"></a>3.关联远程仓库</h3><blockquote>
<p>git remote add origin <a target="_blank" rel="noopener" href="https://github.com/HuafuHub/myTest.git">https://github.com/HuafuHub/myTest.git</a></p>
</blockquote>
<h3 id="4-拉取远程仓库"><a href="#4-拉取远程仓库" class="headerlink" title="4.拉取远程仓库"></a>4.拉取远程仓库</h3><blockquote>
<p>git pull –rebase origin master</p>
</blockquote>
<h1 id="二、常用命令"><a href="#二、常用命令" class="headerlink" title="二、常用命令"></a>二、常用命令</h1><table>
<thead>
<tr>
<th align="left">命令</th>
<th align="left">含义</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">mkdir dirname</td>
<td align="left">创建文件夹</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">cd dirname</td>
<td align="left">进入文件夹</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git init</td>
<td align="left">创建版本库</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">ls -ah</td>
<td align="left">查看隐藏文件</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git config –list</td>
<td align="left">查看配置文件</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git config –global user.name ‘huafu’</td>
<td align="left">配置用户名</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git config –global user.email ‘<a href="mailto:&#x31;&#x30;&#51;&#x30;&#51;&#x36;&#51;&#x36;&#x34;&#53;&#64;&#x71;&#x71;&#x2e;&#99;&#111;&#109;">&#x31;&#x30;&#51;&#x30;&#51;&#x36;&#51;&#x36;&#x34;&#53;&#64;&#x71;&#x71;&#x2e;&#99;&#111;&#109;</a>‘</td>
<td align="left">配置邮件地址</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git remote add origin url</td>
<td align="left">关联远程仓库</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git remote rename oldname newname</td>
<td align="left">重命名远程仓库</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git remote -v</td>
<td align="left">查看远程仓库地址</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">git remote</td>
<td align="left">查看远程仓库名</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git status</td>
<td align="left">查看文件状态</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git add <font color=red>file</td>
<td align="left">从工作区添加至暂存区</td>
<td align="left">单个文件</td>
</tr>
<tr>
<td align="left"><font color=green>git add <strong><font color=red>.</strong></td>
<td align="left">从工作区添加至暂存区</td>
<td align="left">整个当前目录的文件</td>
</tr>
<tr>
<td align="left"><font color=green>git commit <font color=red>-m ‘msg’</td>
<td align="left">从暂存区提交至本地仓库</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git branch <font color=red>name</td>
<td align="left">创建分支</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git branch -d <font color=red>name</td>
<td align="left">删除分支</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git checkout -b <font color=red>name</td>
<td align="left">创建并切换分支</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git checkout <font color=red>name</td>
<td align="left">切换分支</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><font color=green>git checkout <font color=red>– flie</td>
<td align="left">恢复到暂存区或本地仓库同步状态</td>
<td align="left"></td>
</tr>
</tbody></table>
<img src="./git.png">



      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/06/01/GITa/" data-id="ckya9fc0z000bygf63yuw1lfj"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/git/" rel="tag">git</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-ES6b" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/05/15/ES6b/"
    >ES6 进阶</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/05/15/ES6b/" class="article-date">
  <time datetime="2018-05-15T08:16:34.000Z" itemprop="datePublished">2018-05-15</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h2 id="一-变量"><a href="#一-变量" class="headerlink" title="(一) 变量"></a>(一) 变量</h2><h3 id="1-var"><a href="#1-var" class="headerlink" title="1.var"></a>1.var</h3><ul>
<li>变量重复声明: 会导致数据被覆盖</li>
<li>变量声明提升: 数据访问错乱, 闭包问题</li>
<li>全局变量挂在: 挂在在全局对象上,会导致全局对象的属性污染 </li>
</ul>
<h3 id="2-let"><a href="#2-let" class="headerlink" title="2.let"></a>2.let</h3><ul>
<li>块级作用域: 声明的变量具有识别绑定块级作用域的能力, 只在对应的作用域内有效</li>
<li>暂时性死区: 变量声明提升后会放进暂时性死区, 在代码运行到声明语句的时候才会移除, 暂时性死区的内容不可访问</li>
<li>全局声明的变量不会挂在全局对象</li>
<li>变量在同一作用域内不允许重复声明</li>
</ul>
<h3 id="3-const"><a href="#3-const" class="headerlink" title="3.const"></a>3.const</h3><ul>
<li>具有和let一样的特点</li>
<li>变量声明时必须初始化</li>
<li>声明的变量内存空间不允许改变</li>
<li>固定的常量命名: 全部大写, _线分隔</li>
</ul>
<hr>
<h2 id="二-字符串与正则"><a href="#二-字符串与正则" class="headerlink" title="(二) 字符串与正则"></a>(二) 字符串与正则</h2><h3 id="1-Unicode-编码"><a href="#1-Unicode-编码" class="headerlink" title="1.Unicode 编码"></a>1.Unicode 编码</h3><h4 id="1-码元"><a href="#1-码元" class="headerlink" title="(1) 码元"></a>(1) 码元</h4><ul>
<li>在早期, 由于内存空间的宝贵, Unicode 使用16位二进制来存储文字</li>
<li>一个16位的二进制编码为一个码元</li>
<li>String.charCodeAt(index)</li>
</ul>
<h4 id="2-码点"><a href="#2-码点" class="headerlink" title="(2) 码点"></a>(2) 码点</h4><ul>
<li>在后来, 技术的进步, Unicode 对文字进行了拓展, 将某些文字拓展到了32位</li>
<li>一个32位的二进制编码占用两个码元, 这些文字对应的二进制数叫做码点</li>
<li>String.charPonitAt(index)</li>
</ul>
<h3 id="2-字符串新增实例方法"><a href="#2-字符串新增实例方法" class="headerlink" title="2.字符串新增实例方法"></a>2.字符串新增实例方法</h3><ul>
<li>str.includes(str, [index]), 检测字符串是否包含指定字符(默认从头开始, 可指定开始位置)</li>
<li>str.startWith(str, [index]), 检测字符串是否以指定字符开始(默认从头开始, 可指定开始位置)</li>
<li>str.enWith(str, [index]), 检测字符串是否以指定字符结束(默认从头开始, 可指定开始位置)</li>
<li>str.repeat(num), 将字符串重复指定次数后返回</li>
</ul>
<h3 id="3-正则"><a href="#3-正则" class="headerlink" title="3.正则"></a>3.正则</h3><ul>
<li>i 不区分大小写</li>
<li>m 多行匹配</li>
<li>g 全局匹配</li>
<li>u 码点匹配(正则使用码点进行匹配)</li>
<li>y 粘连标记(正则匹配受lastIndex影响)</li>
</ul>
<h3 id="4-模板字符串"><a href="#4-模板字符串" class="headerlink" title="4.模板字符串"></a>4.模板字符串</h3><ul>
<li>模板字符串符号 <strong>`string`</strong></li>
<li>自然书写多行</li>
<li>利用 <strong>${}</strong> 进行表达式插入</li>
<li><strong>标记</strong> <ul>
<li>函数名标记: 调用函数, 模板字符串分隔作为参数传递</li>
<li>String.raw标记: 纯文本(不识别转义符)<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> param1 = <span class="string">&quot;a&quot;</span></span><br><span class="line"><span class="keyword">let</span> param2 = <span class="string">&quot;z&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> text = myTag<span class="string">`英文字母表的第一个字母是<span class="subst">$&#123;param1&#125;</span>, 最后一个字母是<span class="subst">$&#123;param2&#125;</span>`</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myTag</span>(<span class="params">template, paramOne, paramTwo</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(template)<span class="comment">// [&#x27;英文字母表的第一个字母是&#x27;, &#x27;, 最后一个字母是&#x27;, &#x27;&#x27;]</span></span><br><span class="line">  <span class="built_in">console</span>.log(paramOne)<span class="comment">// a</span></span><br><span class="line">  <span class="built_in">console</span>.log(paramTwo)<span class="comment">// z</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<hr>
<h2 id="三-函数与拓展运算符"><a href="#三-函数与拓展运算符" class="headerlink" title="(三) 函数与拓展运算符"></a>(三) 函数与拓展运算符</h2><h3 id="1-拓展运算符"><a href="#1-拓展运算符" class="headerlink" title="1.拓展运算符"></a>1.拓展运算符</h3><ul>
<li>拓展运算符 <strong>…</strong></li>
<li>展开数组: 剥离[]</li>
<li>展开对象: 剥离{}</li>
<li>收集参数: 剩余参数</li>
</ul>
<h3 id="2-参数默认值"><a href="#2-参数默认值" class="headerlink" title="2.参数默认值"></a>2.参数默认值</h3><ul>
<li>给行参赋值, 赋予的值就是默认值</li>
<li>只有该行参绝对等于undefined 的时候才会应用默认值</li>
<li>在使用默认值的情况下, 该函数会自动定义成严格模式, arguments和行参是脱离的</li>
<li>行参默认值也存在暂时性死区</li>
</ul>
<h3 id="3-剩余参数"><a href="#3-剩余参数" class="headerlink" title="3.剩余参数"></a>3.剩余参数</h3><ul>
<li>在行参位置使用拓展运算符将剩余实参收集于一个数组内</li>
<li>一个函数只能有一个剩余参数</li>
<li>剩余参数只能定义为最后一个行参</li>
</ul>
<h3 id="4-函数双重性"><a href="#4-函数双重性" class="headerlink" title="4.函数双重性"></a>4.函数双重性</h3><ul>
<li>普通函数: 处理程序</li>
<li>构造函数: 创建对象<ul>
<li>期望通过new调用</li>
<li>没有使用new调用, 会导致给this指定的对象(通常是window)添加错误的属性</li>
<li>原始使用this instanceof FunctionName 来判断是否通过new调用, 而是用call改变this执行则可以避开判断, 不严谨</li>
<li>ES6 在构造函数内可以通过new.target来判断是否是通过new 调用<ul>
<li>new 调用, new.target 指向该构造函数</li>
<li>非 new 调用, new.target 指向undefined</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="5-箭头函数"><a href="#5-箭头函数" class="headerlink" title="5.箭头函数"></a>5.箭头函数</h3><h4 id="1-this指向"><a href="#1-this指向" class="headerlink" title="(1) this指向"></a>(1) this指向</h4><ul>
<li>直接调用函数, this指向window</li>
<li>对象调用方法, this指向该对象</li>
<li>new调用函数, this指向新创建的对象实例</li>
<li>函数通过 apply call bind 调用, this指向绑定的目标</li>
<li>DOM触发事件函数, this指向事件源</li>
<li>箭头函数没有this, 箭头函数体内使用this<ul>
<li>this 指向与调用无关</li>
<li>this 指向该箭头函数定义时的this指向</li>
</ul>
</li>
<li>严格模式下, 未经绑定, this指向undefined</li>
<li>类的字段初始化器中, this指向该类实例对象</li>
</ul>
<h4 id="2-使用细节"><a href="#2-使用细节" class="headerlink" title="(2) 使用细节"></a>(2) 使用细节</h4><ul>
<li>箭头函数没有this, arguments</li>
<li>箭头函数没有prototype, new.target</li>
<li>方法不使用箭头函数</li>
</ul>
<hr>
<h2 id="四-对象"><a href="#四-对象" class="headerlink" title="(四) 对象"></a>(四) 对象</h2><h3 id="1-对象字面量"><a href="#1-对象字面量" class="headerlink" title="1.对象字面量"></a>1.对象字面量</h3><ul>
<li>属性速写: 属性值来源于变量, 属性名与变量名相同时, 可以省略属性值</li>
<li>方法速写: 属性名与函数名相同时, 可以省略属性名和function关键字及 : 号</li>
<li>计算属性名: [ 表达式 ]</li>
</ul>
<h3 id="2-Object新增静态方法"><a href="#2-Object新增静态方法" class="headerlink" title="2.Object新增静态方法"></a>2.Object新增静态方法</h3><ul>
<li><p>Object.is(a, b) </p>
<ul>
<li>相当于严格相等</li>
<li>NaN和NaN是相等</li>
<li>+0和-0是不相等</li>
</ul>
</li>
<li><p>Object.assign(obj1, obj2)</p>
<ul>
<li>对象混合</li>
<li>将obj2混合入obj1, 同名覆盖, 返回obj1</li>
</ul>
</li>
<li><p>Object.getOwnPropertyName(obj)</p>
<ul>
<li>返回自身的所有属性的属性名(不包括原型链上的属性)</li>
<li>ES6规定了所返回数组的排序方式<ul>
<li>先排数字(升序)</li>
<li>再排字母(书写顺序)</li>
</ul>
</li>
</ul>
</li>
<li><p>Object.setPrototypeOf(obj, prototype)</p>
<ul>
<li>设置对象隐式原型</li>
</ul>
</li>
</ul>
<h3 id="3-面向对象（类）"><a href="#3-面向对象（类）" class="headerlink" title="3.面向对象（类）"></a>3.面向对象（类）</h3><h4 id="1-构造函数"><a href="#1-构造函数" class="headerlink" title="(1) 构造函数"></a>(1) 构造函数</h4><ul>
<li>属性和原型成员定义相分离, 可读性低</li>
<li>原型成员可以被枚举</li>
<li>默认可以当作普通函数调用</li>
</ul>
<h4 id="2-类的特点"><a href="#2-类的特点" class="headerlink" title="(2) 类的特点"></a>(2) 类的特点</h4><ul>
<li>属性和原型成员定义统一在一起, 可读性高</li>
<li>类的方法不可以枚举</li>
<li>必须使用new关键字调用</li>
<li>类中的代码均在严格模式下运行</li>
<li>类声明不会提升, 也有暂时性死区</li>
</ul>
<h4 id="3-语法"><a href="#3-语法" class="headerlink" title="(3) 语法"></a>(3) 语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name, age</span>)</span> &#123;</span><br><span class="line">    <span class="comment">// 实例成员</span></span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">    <span class="built_in">this</span>.age = age</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//访问器，实例成员</span></span><br><span class="line">  <span class="keyword">get</span> <span class="title">age</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>._age + <span class="string">&quot;岁&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">set</span> <span class="title">age</span>(<span class="params">age</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (age &lt; <span class="number">0</span>) &#123;</span><br><span class="line">      age = <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (age &gt; <span class="number">100</span>) &#123;</span><br><span class="line">      age = <span class="number">100</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">this</span>._age = <span class="number">100</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//字段初始化器, 实例成员</span></span><br><span class="line">  eat = <span class="string">&#x27;food&#x27;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//静态成员</span></span><br><span class="line">  <span class="keyword">static</span> type = <span class="string">&quot;animal&quot;</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">method</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;animal&quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//原型方法</span></span><br><span class="line">  <span class="function"><span class="title">callName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> Animal(<span class="string">&quot;dog&quot;</span>, <span class="number">50</span>)</span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"><span class="built_in">console</span>.dir(Animal)</span><br></pre></td></tr></table></figure>
<ul>
<li>实例成员<ul>
<li>定义在constructor函数内部</li>
<li>使用字段初始化器直接定义在constructor函数外部的属性</li>
<li>使用访问器（get, set）定义在constructor函数外部的成员</li>
</ul>
</li>
<li>原型成员<ul>
<li>直接定义在constructor函数外部的方法</li>
</ul>
</li>
<li>静态成员<ul>
<li>使用static关键字修饰的成员</li>
</ul>
</li>
</ul>
<h4 id="（4）装饰器"><a href="#（4）装饰器" class="headerlink" title="（4）装饰器"></a>（4）装饰器</h4><h4 id="（5）继承"><a href="#（5）继承" class="headerlink" title="（5）继承"></a>（5）继承</h4><ul>
<li>extends 继承</li>
<li>super 父类</li>
</ul>
<hr>
<h2 id="五-解构"><a href="#五-解构" class="headerlink" title="(五) 解构"></a>(五) 解构</h2><h3 id="1-对象结构"><a href="#1-对象结构" class="headerlink" title="1.对象结构"></a>1.对象结构</h3><ul>
<li>同名解构</li>
<li>异名解构</li>
<li>解构默认值</li>
<li>解构失败</li>
<li>嵌套深度解构<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;abc&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">123</span>,</span><br><span class="line">  <span class="attr">sex</span>: <span class="string">&quot;男&quot;</span>,</span><br><span class="line">  <span class="attr">address</span>: &#123;</span><br><span class="line">    province：<span class="string">&quot;云南&quot;</span>,</span><br><span class="line">    <span class="attr">city</span>: <span class="string">&quot;昆明&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123;name, age, <span class="attr">sex</span>:genner, <span class="attr">address</span>: &#123;province, city&#125;, time = <span class="number">20200404</span>, user&#125; = obj</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="2-数组解构"><a href="#2-数组解构" class="headerlink" title="2.数组解构"></a>2.数组解构</h3><ul>
<li>位置解构</li>
<li>指定位置解构</li>
<li>解构默认值</li>
<li>解构失败</li>
<li>嵌套深度解构</li>
<li>剩余结构<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, [<span class="string">&quot;a&quot;</span>], <span class="number">3</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [ , , two, [A, B = <span class="string">&quot;b&quot;</span>, C], ...num] = obj</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-参数解构"><a href="#3-参数解构" class="headerlink" title="3.参数解构"></a>3.参数解构</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">&#123;method = <span class="string">&quot;GET&quot;</span>, url = <span class="string">&quot;/&quot;</span>&#125; = &#123;&#125;</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(method, url)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ajax()</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="六-符号"><a href="#六-符号" class="headerlink" title="(六) 符号"></a>(六) 符号</h2><h3 id="1-普通符号Symbol"><a href="#1-普通符号Symbol" class="headerlink" title="1.普通符号Symbol"></a>1.普通符号Symbol</h3><ul>
<li>通过调用Symbol函数创建一个Symbol, 没有字面量形式, 参数是符号描述</li>
<li>每次调用Symbol函数创建创建的Symbol都不一样</li>
<li>通过typeof 得到的类型是symbol</li>
<li>无法进行隐式类型转换</li>
<li>可以进行显式类型转换 String(Symbol)</li>
</ul>
<h3 id="2-私有属性"><a href="#2-私有属性" class="headerlink" title="2.私有属性"></a>2.私有属性</h3><ul>
<li>符号是ES6新增的数据类型， 用于给对象设置私有属性</li>
<li>符号可以作为对象的属性存在，称之为符号属性</li>
<li>通过立即执行函数私有变量，来设计私有属性</li>
<li>符号属性不能枚举<ul>
<li>for-in遍历，不能读取符号属性</li>
<li>Object.getOwnPropertyNames()获取所有不可枚举的属性，不能读取符号属性</li>
<li>Object.keys()获取所有可枚举的属性，不能读取符号属性</li>
<li>Object.getOwnPropertySymbols()获取所有的符号属性，能读取符号属性</li>
</ul>
</li>
</ul>
<h3 id="3-共享符号Symbol-for"><a href="#3-共享符号Symbol-for" class="headerlink" title="3.共享符号Symbol.for"></a>3.共享符号Symbol.for</h3><ul>
<li>通过调用Symbol函数的静态方法for创建一个Symbol, 没有字面量形式, 参数是符号描述</li>
<li>只要符号描述相同，创建的Symbol始终相同（不传递参数创建的Symbol永远一样）</li>
</ul>
<h3 id="4-知名符号"><a href="#4-知名符号" class="headerlink" title="4.知名符号"></a>4.知名符号</h3><ul>
<li>知名符号是一些特殊含义的共享符号， 通过Symbol的静态属性得到</li>
<li>Symbol.hasInstance 影响instanceof</li>
<li>Symbol.isConcatSpreadable 影响数组concat方法</li>
<li>Symbol.toPrimitive 影响类型转换</li>
<li>Symbol.toStringTag 影响Object.prototype.toString的返回值</li>
</ul>
<hr>
<h2 id="七-异步"><a href="#七-异步" class="headerlink" title="(七) 异步"></a>(七) 异步</h2><h3 id="1-事件循环"><a href="#1-事件循环" class="headerlink" title="1.事件循环"></a>1.事件循环</h3><img src='./event loop.png'>

<h3 id="2-回调地域"><a href="#2-回调地域" class="headerlink" title="2.回调地域"></a>2.回调地域</h3><h3 id="3-Promise"><a href="#3-Promise" class="headerlink" title="3.Promise"></a>3.Promise</h3><h4 id="（1）模式"><a href="#（1）模式" class="headerlink" title="（1）模式"></a>（1）模式</h4><img src='./promise.png'>

<h4 id="（2）并联"><a href="#（2）并联" class="headerlink" title="（2）并联"></a>（2）并联</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> pro = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">//未决阶段,状态pending</span></span><br><span class="line">  <span class="comment">//通过调用resolve将状态推向已决阶段的resolved</span></span><br><span class="line">  <span class="comment">//通过调用reject将状态推向已决阶段的rejected</span></span><br><span class="line">  <span class="comment">//发生错误，则将状态推向已决阶段的rejected</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//已决阶段thenable</span></span><br><span class="line"><span class="comment">//得到的是resolve传递的数据</span></span><br><span class="line"><span class="comment">//可注册多个并联thenable</span></span><br><span class="line">pro.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">&#125;)</span><br><span class="line">pro.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">&#125;)</span><br><span class="line">pro.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//已决阶段catchable</span></span><br><span class="line"><span class="comment">//得到的是reject传递的数据</span></span><br><span class="line"><span class="comment">//可注册多个并联catchable</span></span><br><span class="line">pro.catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br><span class="line">pro.catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br><span class="line">pro.catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li><font color=red>Promise并没有消除回调，只是让回调变得可控</font></li>
<li>未决阶段的函数是同步的，会立即执行</li>
<li>已决阶段thenable函数是异步的，会加入微队列等待执行<ul>
<li>then方法用于添加并联thenable函数</li>
<li>then方法可以同时添加并联thenable、catchable函数</li>
</ul>
</li>
<li>已决阶段catchable函数是异步的，会加入微队列等待执行<ul>
<li>catch方法用于添加并联catchable函数</li>
</ul>
</li>
<li>在未决阶段发生未捕获的错误，会将状态推向rejected，并被catchable捕获</li>
</ul>
<h4 id="（3）串联"><a href="#（3）串联" class="headerlink" title="（3）串联"></a>（3）串联</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> pro = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">//未决阶段,状态pending</span></span><br><span class="line">  <span class="comment">//通过调用resolve将状态推向已决阶段的resolved</span></span><br><span class="line">  <span class="comment">//通过调用reject将状态推向已决阶段的rejected</span></span><br><span class="line">  <span class="comment">//发生错误，则将状态推向已决阶段的rejected</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//已决阶段thenable、catchable</span></span><br><span class="line"><span class="comment">//pro1是一个promise,状态为pending</span></span><br><span class="line"><span class="keyword">const</span> pro1 = pro.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">  <span class="keyword">return</span> data</span><br><span class="line">  <span class="comment">//正常处理后，将状态推向已决阶段的resolved</span></span><br><span class="line">  <span class="comment">//发生错误，则将状态推向已决阶段的rejected</span></span><br><span class="line">&#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">  <span class="keyword">return</span> err</span><br><span class="line">  <span class="comment">//正常处理后，将状态推向已决阶段的resolved</span></span><br><span class="line">  <span class="comment">//发生错误，则将状态推向已决阶段的rejected</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//默认返回一个promise</span></span><br><span class="line"><span class="comment">//携带的数据是上一次的thenable、catchable返回值</span></span><br><span class="line">pro1.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">&#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>then、catch方法每次调用返回一个全新Promise<ul>
<li>初始的状态为pending</li>
<li>当thenable、catchable处理完毕后，对应改变状态<ul>
<li>正常处理后，将状态推向已决阶段的resolved</li>
<li>发生错误，则将状态推向已决阶段的rejected </li>
<li>返回值即为携带的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（4）静态成员"><a href="#（4）静态成员" class="headerlink" title="（4）静态成员"></a>（4）静态成员</h4><ul>
<li> <strong>Promise.resolve(data)</strong></li>
<li>得到一个resolved状态的Promise</li>
<li>携带的数据为传递的data数据</li>
<li>如果传递的data数据是一个Promise<ul>
<li>则得到的是传递的Promise</li>
<li>携带的数据是传递的Promise携带的数据</li>
</ul>
</li>
<li><strong>Promise.reject(data)</strong> <ul>
<li>得到一个rejected状态的Promise</li>
<li>数据为传递的data</li>
</ul>
</li>
<li><strong>Promise.all(proms)</strong> <ul>
<li>传递一个Promise数组，得到一个全新的Promise<ul>
<li>初始状态为pending</li>
<li>全部的Promise都为resolved<ul>
<li>状态为resolved</li>
<li>携带的数据为一个数组，依次包含所有的Promise携带的数据</li>
</ul>
</li>
<li>有一个Promise为rejected<ul>
<li>状态为rejected</li>
<li>携带的数据为第一个rejected状态的Promise携带的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><strong>Promise.race(proms)</strong> <ul>
<li>传递一个Promise数组，得到一个全新的Promise</li>
<li>有一个Promise为resolved<ul>
<li>状态为resolved</li>
<li>携带的数据为第一个resolved状态的Promise携带的数据</li>
</ul>
</li>
<li>有一个Promise为rejected<ul>
<li>状态为rejected</li>
<li>携带的数据为第一个rejected状态的Promise携带的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（5）模拟源码"><a href="#（5）模拟源码" class="headerlink" title="（5）模拟源码"></a>（5）模拟源码</h4><hr>
<h3 id="4-async-await"><a href="#4-async-await" class="headerlink" title="4.async/await"></a>4.async/await</h3><ul>
<li>async用于修饰一个函数<ul>
<li>修饰函数即为异步函数</li>
<li>修饰函数一定隐式返回一个Promise</li>
<li>修饰函数中的return返回值即为Promise的resolved状态携带的数据</li>
<li>修饰函数中的throw抛出值即为Promise的rejected状态携带的数据</li>
</ul>
</li>
<li>await用于等待一个Promise<ul>
<li>只能在async修饰的函数体中使用</li>
<li>当等待的Promise完成时，返回携带的数据，当等待的Promise未完成时，函数体不会继续执行</li>
<li>当await在循环中使用时，循环会跟着等待，当等待的Promise未完成时，不会进入下一次循环</li>
<li>当await等待的不是一个Promise时，会使用Promise.resolve()进行包装成一个PromisePromise</li>
</ul>
</li>
</ul>
<hr>
<h3 id="5-Fetch"><a href="#5-Fetch" class="headerlink" title="5.Fetch"></a>5.Fetch</h3><h4 id="（1）特点"><a href="#（1）特点" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>并非取代AJAX, 而是对AJAX传统api的改进<ul>
<li>传统XMLHttpRequest所有功能集中在一个对象上，不利于代码维护</li>
<li>采用传统时间驱动模式，无法适配新的Promise api</li>
</ul>
</li>
<li>精细的分隔，跟利于处理复杂的AJAX场景</li>
<li>Fetch属于html5新增 web api</li>
</ul>
<h4 id="（2）基本使用"><a href="#（2）基本使用" class="headerlink" title="（2）基本使用"></a>（2）基本使用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> url = <span class="string">&#x27;www.data.com&#x27;</span></span><br><span class="line"><span class="keyword">let</span> config = &#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="comment">//请求方式</span></span><br><span class="line">  headers:<span class="comment">//请求头</span></span><br><span class="line">  body: <span class="comment">//请求体</span></span><br><span class="line">&#125;</span><br><span class="line">fetch(url, config)</span><br></pre></td></tr></table></figure>
<ul>
<li>传递url和config配置<ul>
<li><font color=red>本质内部使用url和config创建一个Request对象</font></li>
<li><font color=red>也可直接传递一个Request对象</font></li>
</ul>
</li>
<li>返回一个Promise对象<ul>
<li>只要服务器有响应就一定是resolved状态</li>
<li>如果网络错误，没有到达服务器是rejected状态</li>
<li>携带的数据是服务器响应的内容</li>
</ul>
</li>
</ul>
<h4 id="（3）Response对象"><a href="#（3）Response对象" class="headerlink" title="（3）Response对象"></a>（3）Response对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getDatas</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> url = <span class="string">&#x27;www.data.com&#x27;</span></span><br><span class="line">  <span class="keyword">let</span> config = &#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="comment">//请求方式</span></span><br><span class="line">    headers:<span class="comment">//请求头</span></span><br><span class="line">    body: <span class="comment">//请求体</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> response = <span class="keyword">await</span> fetch(url, config)</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>Response对象成员：<ul>
<li>ok: boolean, 消息码200-299是true, 否则是false</li>
<li>status: number, 状态码</li>
<li>text() 处理文本格式</li>
<li>blob() 处理二进制格式</li>
<li>json() 处理json格式</li>
<li>redirect() 重定向</li>
</ul>
</li>
<li>测试可模拟一个Response对象<ul>
<li>通过new Response构造函数可创建一个Response对象<ul>
<li>参数1：string, 模拟的数据，json格式的字符串</li>
<li>参数2：object, Response对象成员</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（4）Request对象"><a href="#（4）Request对象" class="headerlink" title="（4）Request对象"></a>（4）Request对象</h4><ul>
<li>fetch可以直接传递一个Request对象</li>
<li>通过new Request构造函数创建一个Request对象<ul>
<li>传递url和config</li>
<li>得到一个request对象</li>
</ul>
</li>
<li>每一次请求使用的Request对象应保证唯一（新建，勿重复使用）<ul>
<li>通过Request对象的clone()方法复制一个request对象</li>
</ul>
</li>
</ul>
<h4 id="（5）Headers对象"><a href="#（5）Headers对象" class="headerlink" title="（5）Headers对象"></a>（5）Headers对象</h4><ul>
<li>用于配置fetch的config配置中的headers</li>
<li>通过new Headers构造函数创建一个Headers对象<ul>
<li>参数：object, 相应配置</li>
</ul>
</li>
<li>Headers对象成员：<ul>
<li>has(key) 检查是否存在指定的key</li>
<li>get(key) 获取指定key的value</li>
<li>set(key, newValue) 修改指定key的value, 如果不存在就添加一个</li>
<li>append(key, value) 添加一个键值对</li>
<li>keys() 得到key的集合</li>
<li>values() 得到value的集合</li>
<li>entries() 得到键值对的集合</li>
</ul>
</li>
</ul>
<h4 id="（6）FormData对象"><a href="#（6）FormData对象" class="headerlink" title="（6）FormData对象"></a>（6）FormData对象</h4><ul>
<li>通过new FormData构造函数创建FormData对象，用于文件上传时创建请求体<ul>
<li>使用对象append()方法传递数据<ul>
<li>参数1：string, 文件名</li>
<li>参数2：object, 文件数据（通过input元素的files属性获得）</li>
</ul>
</li>
</ul>
</li>
<li>流程：<ul>
<li>客服端将文件数据发送给服务器</li>
<li>服务器保存文件</li>
<li>服务器响应一个访问地址 </li>
</ul>
</li>
<li>请求方法：POST</li>
<li>请求表单格式：multipart/form-data</li>
<li>请求体必须包含键值对<ul>
<li>键：服务器要求文件名</li>
<li>值：文件数据</li>
</ul>
</li>
</ul>
<hr>
<h2 id="八-迭代器与生成器"><a href="#八-迭代器与生成器" class="headerlink" title="(八) 迭代器与生成器"></a>(八) 迭代器与生成器</h2><h3 id="1-迭代器-Iterator"><a href="#1-迭代器-Iterator" class="headerlink" title="1.迭代器 Iterator"></a>1.迭代器 Iterator</h3><h4 id="（1）迭代与遍历"><a href="#（1）迭代与遍历" class="headerlink" title="（1）迭代与遍历"></a>（1）迭代与遍历</h4><ul>
<li>迭代：从数据集合中按照一定顺序，依次取出数据的过程（不保证取多少，也不保证把所有的数据取完）</li>
<li>遍历：检索整个数据集合，将所有数据依次全部取出（保证取出所有数据）</li>
</ul>
<h4 id="（2）迭代模式"><a href="#（2）迭代模式" class="headerlink" title="（2）迭代模式"></a>（2）迭代模式</h4><ul>
<li>迭代器应具有得到下一个数据的能力</li>
<li>迭代器应具有判断是否有下一个数据的能力</li>
</ul>
<h4 id="（3）js迭代器"><a href="#（3）js迭代器" class="headerlink" title="（3）js迭代器"></a>（3）js迭代器</h4><ul>
<li><strong>迭代器</strong><ul>
<li>一个对象具有next()方法<ul>
<li>调用next()方法返回一个对象<ul>
<li>value属性：得到下一个数据</li>
<li>done属性：判断是否有下一个数据</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><strong>迭代器创建函数</strong><ul>
<li>创建迭代器<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组迭代器</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getIteratorOfArray</span>(<span class="params">arr</span>)</span>&#123;<span class="comment">//迭代器创建函数</span></span><br><span class="line">  <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line">  <span class="keyword">return</span> &#123;<span class="comment">//一个对象</span></span><br><span class="line">    <span class="function"><span class="title">next</span>(<span class="params"></span>)</span> &#123;<span class="comment">//具有一个next方法</span></span><br><span class="line">      <span class="keyword">return</span> &#123;<span class="comment">//返回一个对象，具有value属性和done属性</span></span><br><span class="line">        <span class="attr">value</span>: i &gt;= arr.length ? <span class="literal">undefined</span> : arr[i],<span class="comment">//有得到下一个数据的能力</span></span><br><span class="line">        <span class="attr">done</span>: i++ &gt;= arr.length<span class="comment">//有判断是否有下一个数据的能力</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> iterator = getIteratorOfArray(arr)<span class="comment">//迭代器</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="（4）可迭代协议"><a href="#（4）可迭代协议" class="headerlink" title="（4）可迭代协议"></a>（4）可迭代协议</h4><ul>
<li><strong>ES6规定：</strong><ul>
<li>如若一个对象具有知名符号属性<strong>Symbol.iterator</strong></li>
<li>并且属性值是一个迭代器创建函数</li>
<li>那么该对象是可迭代的（iterable）</li>
</ul>
</li>
<li><strong>for-of循环</strong><ul>
<li>用于迭代可迭代对象</li>
</ul>
</li>
<li><strong>…拓展运算符</strong><ul>
<li>用于展开可迭代对象的每次迭代结果<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对象迭代器</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">a1</span>: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">  <span class="attr">b2</span>: <span class="string">&#x27;bb&#x27;</span>,</span><br><span class="line">  <span class="attr">c3</span>: <span class="string">&#x27;ccc&#x27;</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]() &#123;</span><br><span class="line">    <span class="keyword">const</span> keys = <span class="built_in">Object</span>.keys(<span class="built_in">this</span>)</span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">next</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          <span class="attr">value</span>: i &gt;= keys.length ? <span class="literal">undefined</span> : <span class="built_in">this</span>[keys[i]],</span><br><span class="line">          <span class="attr">done</span>: i++ &gt;= keys.length</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//模拟for-of循环</span></span><br><span class="line"><span class="keyword">const</span> iterator = obj[<span class="built_in">Symbol</span>.iterator]()</span><br><span class="line"><span class="keyword">let</span> resault = iterator.next()</span><br><span class="line"><span class="keyword">let</span> value = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">while</span> (!resault.done) &#123;</span><br><span class="line">  value = resault.value</span><br><span class="line">  <span class="built_in">console</span>.log(value)</span><br><span class="line">  resault = iterator.next()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//展开可迭代对象</span></span><br><span class="line"><span class="keyword">const</span> arr = [...obj]</span><br><span class="line"><span class="built_in">console</span>.log(arr)</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="2-生成器-Generator"><a href="#2-生成器-Generator" class="headerlink" title="2.生成器 Generator"></a>2.生成器 Generator</h3><h4 id="（1）Generator-构造函数"><a href="#（1）Generator-构造函数" class="headerlink" title="（1）Generator 构造函数"></a>（1）Generator 构造函数</h4><ul>
<li>用于创建一个生成器对象</li>
<li>不允许开发者使用（内部底层使用）</li>
</ul>
<h4 id="（2）生成器对象"><a href="#（2）生成器对象" class="headerlink" title="（2）生成器对象"></a>（2）生成器对象</h4><ul>
<li>是一个迭代器</li>
<li>是一个可迭代对象</li>
</ul>
<h4 id="（3）生成器函数"><a href="#（3）生成器函数" class="headerlink" title="（3）生成器函数"></a>（3）生成器函数</h4><ul>
<li>语法：在function关键字后添加 * 号</li>
<li>生成器函数一定返回一个生成器</li>
<li>生成器函数体便不会在调用（创建生成器）时执行，而是通过生成器的next()方法迭代控制执行</li>
<li>生成器函数体是为了给生成器每次迭代提供数据的</li>
</ul>
<h4 id="（4）生成器函数的执行"><a href="#（4）生成器函数的执行" class="headerlink" title="（4）生成器函数的执行"></a>（4）生成器函数的执行</h4><ul>
<li><strong>yield关键字：</strong><ul>
<li>用于生成器函数体内，为生成器每次迭代产生一个迭代数据</li>
<li><font color=red> yiled * other生成器函数</font><ul>
<li>进入other生成器函数内迭代</li>
<li>other生成器函数迭代结束，继续当前生成器函数内迭代</li>
</ul>
</li>
</ul>
</li>
<li><strong>生成器每次next()迭代：</strong><ul>
<li>生成器函数从上一个yield（或开始位置）运行到下一个yield（或结束位置）</li>
<li>当前next(data)传递的数据为上一个yield左边赋值语句的值<ul>
<li>第一次next()传递数据没有意义（没有上一个yield接受）</li>
</ul>
</li>
</ul>
</li>
<li><strong>生成器当前迭代数据：</strong><ul>
<li>value: 当前yield右边的数据</li>
<li>done: 生成器函数是否运行结束</li>
</ul>
</li>
<li><strong>生成器函数的return返回值</strong><ul>
<li>做为第一次迭代结束的迭代数据<ul>
<li>value: return返回值</li>
<li>done: true<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">generator</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  <span class="keyword">const</span> data1 = <span class="keyword">yield</span> <span class="number">1</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>, data1)</span><br><span class="line">  <span class="keyword">const</span> data2 = <span class="keyword">yield</span> <span class="number">2</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>, data2)</span><br><span class="line">  <span class="keyword">const</span> data3 = <span class="keyword">yield</span> <span class="number">3</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>, data3)</span><br><span class="line">  <span class="keyword">return</span> <span class="number">4</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> g = generator()</span><br><span class="line"><span class="keyword">const</span> obj1 = g.next(<span class="string">&quot;a&quot;</span>)<span class="comment">// 1</span></span><br><span class="line"><span class="keyword">const</span> obj2 = g.next(<span class="string">&quot;b&quot;</span>)<span class="comment">// 2 &quot;b&quot;</span></span><br><span class="line"><span class="keyword">const</span> obj3 = g.next(<span class="string">&quot;c&quot;</span>)<span class="comment">// 3 &quot;c&quot;</span></span><br><span class="line"><span class="keyword">const</span> obj4 = g.next(<span class="string">&quot;d&quot;</span>)<span class="comment">// 4 &quot;d&quot;</span></span><br><span class="line"><span class="keyword">const</span> obj5 = g.next(<span class="string">&quot;e&quot;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(obj1, obj2, obj3, obj4, obj5)</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">&#123; value: 1, done: false &#125;</span></span><br><span class="line"><span class="comment">&#123; value: 2, done: false &#125;</span></span><br><span class="line"><span class="comment">&#123; value: 3, done: false &#125;</span></span><br><span class="line"><span class="comment">&#123; value: 4, done: true &#125;</span></span><br><span class="line"><span class="comment">&#123; value: undefined, done: true &#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
<img src='./Generator.png'></li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="3-生成器异步任务控制"><a href="#3-生成器异步任务控制" class="headerlink" title="3.生成器异步任务控制"></a>3.生成器异步任务控制</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * yield左边赋值得到右边的数据</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;function&#125;</span> </span>generator 生成器函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">run</span> (<span class="params">generator</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> task = generator()</span><br><span class="line">  <span class="keyword">let</span> resault = task.next()</span><br><span class="line">  resaultHandle()</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">resaultHandle</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (resault.done) &#123;</span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> resault.value.then === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">      resault.value.then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">        resault = task.next(data)</span><br><span class="line">        resaultHandle()</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      resault = task.next(resault.value)</span><br><span class="line">      resaultHandle()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="九-集合"><a href="#九-集合" class="headerlink" title="(九) 集合"></a>(九) 集合</h2><h3 id="1-Set"><a href="#1-Set" class="headerlink" title="1.Set"></a>1.Set</h3><ul>
<li><strong>用于存放不重复的数据</strong><ul>
<li>重复的数据会自动忽略</li>
<li>使用Object.is()比较数据</li>
<li>针对+0和-0认为是相等的</li>
</ul>
</li>
<li>Set构造函数：<ul>
<li>new 创建一个set集合</li>
<li>参数：iterable, 初始化内容（每次的迭代结果即为数据）</li>
</ul>
</li>
<li>set集合实例成员：<ul>
<li>size: 得到集合中数据数量（只读）</li>
<li>add(data) 添加一个数据</li>
<li>has(data) 检索一个数据</li>
<li>delete(data) 删除一个数据</li>
<li>clear() 清空集合</li>
<li>foreach() 遍历集合</li>
</ul>
</li>
<li>set集合与数组相互转换<ul>
<li>set = new Set(array) 初始化可以传递一个可迭代对象（数组是可迭代的）</li>
<li>arr = […set] 展开运算符可展开一个可迭代对象（set是可迭代的）</li>
</ul>
</li>
<li>set集合遍历<ul>
<li>for-of循环</li>
<li>foreach遍历<ul>
<li>set集合没有下标，所以foreach中第一项item和第二项index保持一致</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="2-Map"><a href="#2-Map" class="headerlink" title="2.Map"></a>2.Map</h3><ul>
<li><strong>用于存放多个键值对数据</strong><ul>
<li>键不可重复</li>
<li>使用Object.is()比较数据</li>
<li>针对+0和-0认为是相等的</li>
</ul>
</li>
<li>传统对象的特点<ul>
<li>键名只能是字符串</li>
<li>获取数据数量不方便</li>
<li>键名容易与原型冲突</li>
</ul>
</li>
<li>Map构造函数：<ul>
<li>通过new 创建一个map集合</li>
<li>参数： iterator, 初始化内容<ul>
<li>参数是一个可迭代对象<ul>
<li>每次迭代的数据必须还是一个可迭代对象，并且能迭代两次<ul>
<li>第一次迭代的结果为键key</li>
<li>第二次迭代的结果为值value</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>map集合实例成员：<ul>
<li>size: 得到集合中键值对数量（只读）</li>
<li>set(key，value): 添加一项键值对<ul>
<li>如果key已存在，修改value</li>
<li>如果key不存在，创建一项</li>
</ul>
</li>
<li>get(key): 获取键对应的值</li>
<li>has(key): 判断键是否存在</li>
<li>delete(key): 删除指定的键对应的键值对</li>
<li>clear(): 清空集合</li>
</ul>
</li>
<li>map集合与数组相互转换<ul>
<li>map = new Set(array) 初始化可以传递一个可迭代对象（二维数组是可迭代的）</li>
<li>arr = […map] 展开运算符可展开一个可迭代对象（map是可迭代的）</li>
</ul>
</li>
<li>map集合遍历<ul>
<li>for-of循环</li>
<li>foreach遍历<ul>
<li>map集合没有下标，所以foreach中:<ul>
<li>第一项item是value</li>
<li>第二项index是key</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="3-WeakSet"><a href="#3-WeakSet" class="headerlink" title="3.WeakSet"></a>3.WeakSet</h3><ul>
<li>该集合功能与Set基本一致<ul>
<li>只能存放对象</li>
<li>不可迭代、不可遍历</li>
<li>没有size属性、没有foreach方法</li>
</ul>
</li>
<li><strong>不影响垃圾回收</strong><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//set</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>: <span class="string">&quot;a&quot;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> set = <span class="keyword">new</span> <span class="built_in">Set</span>()</span><br><span class="line">set.add(obj)</span><br><span class="line">obj = <span class="literal">null</span></span><br><span class="line">set.has(obj)<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//weakset</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>: <span class="string">&quot;a&quot;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> set = <span class="keyword">new</span> <span class="built_in">WeakSet</span>()</span><br><span class="line">set.add(obj)</span><br><span class="line">obj = <span class="literal">null</span></span><br><span class="line">set.has(obj)<span class="comment">//false</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="4-WeakMap"><a href="#4-WeakMap" class="headerlink" title="4.WeakMap"></a>4.WeakMap</h3><ul>
<li>该集合功能与MapMap基本一致<ul>
<li>键只能是对象</li>
<li>不可迭代、不可遍历</li>
<li>没有size属性、没有foreach方法</li>
</ul>
</li>
<li><strong>不影响垃圾回收</strong><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//map</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>: <span class="string">&quot;a&quot;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> set = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line">map.set(obj, <span class="string">&#x27;abc&#x27;</span>)</span><br><span class="line">obj = <span class="literal">null</span></span><br><span class="line">map.has(obj)<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//weakmap</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>: <span class="string">&quot;a&quot;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> set = <span class="keyword">new</span> <span class="built_in">WeakMap</span>()</span><br><span class="line">map.set(obj, <span class="string">&#x27;abc&#x27;</span>)</span><br><span class="line">obj = <span class="literal">null</span></span><br><span class="line">map.has(obj)<span class="comment">//false</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h2 id="十-代理与反射"><a href="#十-代理与反射" class="headerlink" title="(十) 代理与反射"></a>(十) 代理与反射</h2><h3 id="1-属性描述符（Property-Descriptor）"><a href="#1-属性描述符（Property-Descriptor）" class="headerlink" title="1.属性描述符（Property Descriptor）"></a>1.属性描述符（Property Descriptor）</h3><h4 id="（1）获取一个对象的属性描述符"><a href="#（1）获取一个对象的属性描述符" class="headerlink" title="（1）获取一个对象的属性描述符"></a>（1）获取一个对象的属性描述符</h4><ul>
<li>获取某个属性的属性描述符：<ul>
<li><strong>Object.getOwnPropertyDescriptor(obj, key)</strong> </li>
<li>参数：<ul>
<li>对象</li>
<li>属性名</li>
</ul>
</li>
<li>返回值：object<ul>
<li>value: any, 属性值</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>writable：boolean, 该属性的属性值是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
<li>获取某个对象的全部属性的属性描述符：<ul>
<li><strong>Object.getOwnPropertyDescriptors(obj)</strong> </li>
<li>参数：<ul>
<li>对象</li>
</ul>
</li>
<li>返回值：object<ul>
<li>key</li>
<li>value：<ul>
<li>value: any, 属性值</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>writable：boolean, 该属性的属性值是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（2）修改一个对象的属性描述符"><a href="#（2）修改一个对象的属性描述符" class="headerlink" title="（2）修改一个对象的属性描述符"></a>（2）修改一个对象的属性描述符</h4><ul>
<li>修改某个属性的属性描述符：<ul>
<li><strong>Object.defineProperty(obj, key, descriptor)</strong></li>
<li>参数：<ul>
<li>对象</li>
<li>属性名</li>
<li>属性描述符：<ul>
<li>value: any, 属性值</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>writable：boolean, 该属性的属性值是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>修改某个对象全部属性的属性描述符：<ul>
<li><strong>Object.defineProperties(obj, descriptor)</strong></li>
<li>参数：<ul>
<li>对象</li>
<li>属性描述符：<ul>
<li>value: any, 属性值</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>writable：boolean, 该属性的属性值是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（3）存取器属性"><a href="#（3）存取器属性" class="headerlink" title="（3）存取器属性"></a>（3）存取器属性</h4><ul>
<li>修改某个属性的属性描述符：<ul>
<li><strong>Object.defineProperty(obj, key, descriptor)</strong></li>
<li>参数：<ul>
<li>对象</li>
<li>属性名</li>
<li>属性描述符：<ul>
<li>get: function, 读取的时候会运行该函数，函数返回值即为读取得到的值</li>
<li>set: function, 赋值的时候会运行该函数，赋予的值会传递给函数</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>修改某个对象全部属性的属性描述符：<ul>
<li><strong>Object.defineProperties(obj, descriptor)</strong></li>
<li>参数：<ul>
<li>对象</li>
<li>属性描述符：<ul>
<li>get: function, 读取的时候会运行该函数，函数返回值即为读取得到的值</li>
<li>set: function, 赋值的时候会运行该函数，赋予的值会传递给函数</li>
<li>configurable：boolean, 该属性的属性描述符是否可以修改</li>
<li>enumerable: boolean, 该属性是否可以被枚举</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="2-反射-Reflect"><a href="#2-反射-Reflect" class="headerlink" title="2.反射 Reflect"></a>2.反射 Reflect</h3><h4 id="（1）what"><a href="#（1）what" class="headerlink" title="（1）what?"></a>（1）what?</h4><ul>
<li>Reflect是一个内置js对象，不是构造函数，不能通过new 调用创建对象</li>
<li>它提供了一系列方法，可以通过这些方法访问js底层功能</li>
<li><a href=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect>Reflect文档</a></li>
</ul>
<h4 id="（2）why"><a href="#（2）why" class="headerlink" title="（2）why?"></a>（2）why?</h4><ul>
<li>ES5提出：减少魔法， 让代码更纯粹</li>
<li>一切的代码应该都是运算，通过函数输入输出实现（支持函数式编程）</li>
<li>代理需要重写底层功能，底层功能重新的方法需有对应的底层API(支持代理)</li>
</ul>
<table>
<thead>
<tr>
<th align="left">魔法</th>
<th align="left">底层API</th>
</tr>
</thead>
<tbody><tr>
<td align="left">A + B</td>
<td align="left">add(a, b)</td>
</tr>
<tr>
<td align="left">A === B</td>
<td align="left">Object.is(A, B)</td>
</tr>
<tr>
<td align="left">prop in obj</td>
<td align="left">Reflect.has(obj, prop)</td>
</tr>
<tr>
<td align="left">obj.prop = value</td>
<td align="left">Reflect.set(obj, prop, value)</td>
</tr>
<tr>
<td align="left">obj.prop</td>
<td align="left">Reflect.get(obj, prop)</td>
</tr>
<tr>
<td align="left">delete obj.prop</td>
<td align="left">Reflect.deleteProperty(obj, prop)</td>
</tr>
<tr>
<td align="left">new Person(data)</td>
<td align="left">Reflect.construct(Person, dataArr)</td>
</tr>
<tr>
<td align="left">alert(data)</td>
<td align="left">Reflect.apply(alert, this, dataArr)</td>
</tr>
</tbody></table>
<hr>
<h3 id="3-代理-Proxy"><a href="#3-代理-Proxy" class="headerlink" title="3.代理  Proxy"></a>3.代理  Proxy</h3><h4 id="（1）what-1"><a href="#（1）what-1" class="headerlink" title="（1）what?"></a>（1）what?</h4><ul>
<li>Proxy是一个构造函数，通过new 调用创建一个代理对象<ul>
<li>参数1：object, 需要代理的目标对象</li>
<li>参数2：object, 重写的Reflect底层api</li>
<li>返回值：object, 代理对象</li>
</ul>
</li>
</ul>
<h4 id="（2）why-1"><a href="#（2）why-1" class="headerlink" title="（2）why?"></a>（2）why?</h4><ul>
<li>代理作为中介者与外界交互，外界不与目标直接交互</li>
<li>代理拥有强大的中间功能，通过自定义来实现想要实现的功能</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="string">&#x27;abc&#x27;</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">123</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> proxyReflectObj = &#123;</span><br><span class="line">  <span class="function"><span class="title">get</span>(<span class="params">target, key</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//此函数会在读取时运行</span></span><br><span class="line">    <span class="comment">//此处实现自定义功能</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Reflect</span>.get(target, key)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">set</span>(<span class="params">target, key, value</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//此函数会在赋值时运行</span></span><br><span class="line">    <span class="comment">//此处实现自定义功能</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target, key, value)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">has</span>(<span class="params">target, key</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> proxyObj = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj, proxyReflectObj)</span><br><span class="line"></span><br><span class="line">proxyObj.a <span class="comment">//运行get </span></span><br><span class="line">proxyObj.b = <span class="number">100</span><span class="comment">//运行set</span></span><br><span class="line">a <span class="keyword">in</span> proxyObj <span class="comment">//运行has</span></span><br></pre></td></tr></table></figure>

<h3 id="4-观察者模式"><a href="#4-观察者模式" class="headerlink" title="4.观察者模式"></a>4.观察者模式</h3><hr>
<h2 id="（十一）数组"><a href="#（十一）数组" class="headerlink" title="（十一）数组"></a>（十一）数组</h2><h3 id="1-ES6新增API"><a href="#1-ES6新增API" class="headerlink" title="1.ES6新增API"></a>1.ES6新增API</h3><ul>
<li>Array.of()：通过制定数组项创建一个数组</li>
<li>Array.from()：通过一个类数组、可迭代对象创建一个数组</li>
<li>Array.find()：类似filter，但仅仅返回找到的第一个（return true即停止，返回该项）</li>
<li>Array.findIndex()：类似indexOf，返回找到的第一个的下标（return true即停止，返回该项下标）</li>
<li>Array.fill()：用指定的数据填充整个数组</li>
<li>Array.copyWithin()：从指定位置开始，用原数组的数据依次改动数据</li>
<li>Array.includes()：判断数组中是否包含指定数据</li>
</ul>
<h3 id="2-类型化数组"><a href="#2-类型化数组" class="headerlink" title="2.类型化数组"></a>2.类型化数组</h3>
      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/05/15/ES6b/" data-id="ckya9fc0z000cygf6hbgn19n4"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-es6/" rel="tag">js es6</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-ES6a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/05/01/ES6a/"
    >ES6 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/05/01/ES6a/" class="article-date">
  <time datetime="2018-04-30T16:00:00.000Z" itemprop="datePublished">2018-05-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、工具-babel-优雅降级"><a href="#一、工具-babel-优雅降级" class="headerlink" title="一、工具 babel 优雅降级"></a>一、工具 babel 优雅降级</h1><ul>
<li>npm init -y</li>
<li>npm install @babel/core</li>
<li>npm install @babel/preset-env</li>
<li>npm install @babel/cli</li>
<li>create .babelrc</li>
<li>npx babel origin -o target</li>
<li>npx babel origin -o target –watch</li>
</ul>
<h1 id="二、变量声明"><a href="#二、变量声明" class="headerlink" title="二、变量声明"></a>二、变量声明</h1><h3 id="1-var-特点"><a href="#1-var-特点" class="headerlink" title="1.var 特点"></a>1.var 特点</h3><ul>
<li>变量会声明提升，允许先使用后声明</li>
<li>语法松散，重复声明变量不会报错，会覆盖</li>
<li>全局变量会挂载 window</li>
<li>函数局部作用域容易产生闭包</li>
</ul>
<h3 id="2-let-特点"><a href="#2-let-特点" class="headerlink" title="2.let 特点"></a>2.let 特点</h3><ul>
<li>不会变量声明提升，需先声明后使用</li>
<li>不得重复声明</li>
<li>不会挂载全局 window 属性</li>
<li>与大括号{}配合使用形成块级作用域<br><strong>临时死区</strong></li>
<li>称霸当前块级作用域（只要有就必须使用当前块内的变量）</li>
<li>而且声明之前不允许使用，也不使用外部同名变量</li>
<li>具有识别块级作用域的能力</li>
</ul>
<h3 id="3-const-特点"><a href="#3-const-特点" class="headerlink" title="3.const 特点"></a>3.const 特点</h3><ul>
<li>声明常量，常量名建议大写</li>
<li>在声明时就必须初始化值</li>
<li>存储常量的空间里面的值不能发生改变</li>
<li>如若值是原始类型，则无法改变</li>
<li>如若值是引用类型，则地址无法改变</li>
<li>具有识别块级作用域的能力</li>
</ul>
<h1 id="三、运算符"><a href="#三、运算符" class="headerlink" title="三、运算符"></a>三、运算符</h1><h2 id="（一）拓展运算符…"><a href="#（一）拓展运算符…" class="headerlink" title="（一）拓展运算符…"></a>（一）拓展运算符…</h2><h3 id="1-es6-操作数组"><a href="#1-es6-操作数组" class="headerlink" title="1.es6 操作数组"></a>1.es6 操作数组</h3><ul>
<li>写的时候起收集作用</li>
<li>读的时候起展开作用</li>
<li>在做形参的时候，必须是最后一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line">count(...arr); <span class="comment">//count(1,2,3,4,5)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">a, b, ...arg</span>) </span>&#123;</span><br><span class="line">  <span class="comment">//收集</span></span><br><span class="line">  <span class="built_in">console</span>.log(a, b, arg); <span class="comment">//1, 2, [3,4,5]</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-es7-操作对象"><a href="#2-es7-操作对象" class="headerlink" title="2.es7 操作对象"></a>2.es7 操作对象</h3><ul>
<li>读对象展开大括号作用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;</span><br><span class="line">  ...obj1</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="（二）解构赋值"><a href="#（二）解构赋值" class="headerlink" title="（二）解构赋值"></a>（二）解构赋值</h2><h3 id="1-解构对象"><a href="#1-解构对象" class="headerlink" title="1.解构对象"></a>1.解构对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">a</span>: one, <span class="attr">b</span>: two, <span class="attr">c</span>: three, four = <span class="number">4</span> &#125; = obj;</span><br><span class="line"><span class="built_in">console</span>.log(one, two, three, four); <span class="comment">//1、2、3、4</span></span><br></pre></td></tr></table></figure>

<h3 id="2-解构数组"><a href="#2-解构数组" class="headerlink" title="2.解构数组"></a>2.解构数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> [one, two, three] = arr;</span><br><span class="line"><span class="built_in">console</span>.log(one, two, three); <span class="comment">//1、2、3</span></span><br></pre></td></tr></table></figure>

<h2 id="（三）默认赋值"><a href="#（三）默认赋值" class="headerlink" title="（三）默认赋值"></a>（三）默认赋值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">a = <span class="number">1</span>, b = <span class="number">2</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + b);</span><br><span class="line">&#125;</span><br><span class="line">count(<span class="number">10</span>); <span class="comment">//12</span></span><br></pre></td></tr></table></figure>

<h1 id="四、箭头函数"><a href="#四、箭头函数" class="headerlink" title="四、箭头函数"></a>四、箭头函数</h1><h3 id="1-存储"><a href="#1-存储" class="headerlink" title="1.存储"></a>1.存储</h3><ul>
<li>必须有空间存储，变量、数组、对象属性等</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count = <span class="function">() =&gt;</span> &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="2-参数"><a href="#2-参数" class="headerlink" title="2.参数"></a>2.参数</h3><ul>
<li>当只有一个形参的时候，可以胜率圆括号</li>
<li>多个形参名不能相同（报错）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count = <span class="function"><span class="params">a</span> =&gt;</span> &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="4-返回值"><a href="#4-返回值" class="headerlink" title="4.返回值"></a>4.返回值</h3><ul>
<li>可以省略 return 关键字，省略大括号，直接写在箭头后</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count1 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b;</span><br><span class="line"><span class="keyword">let</span> count2 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> [a, b];</span><br><span class="line"><span class="keyword">let</span> count3 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> (&#123; <span class="attr">a</span>: a, <span class="attr">b</span>: b &#125;);</span><br><span class="line"><span class="keyword">let</span> count4 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> <span class="function"><span class="params">a</span> =&gt;</span> a / <span class="number">2</span>;</span><br></pre></td></tr></table></figure>

<h3 id="5-arguments-this-指向"><a href="#5-arguments-this-指向" class="headerlink" title="5.arguments/this 指向"></a>5.arguments/this 指向</h3><ul>
<li>arguments 由定义时外层最接近的非箭头函数的 arguments 决定</li>
<li>this 由定义时外层最接近的非箭头函数的 this 决定</li>
<li>全局定义的箭头函数的 arguments 未定义</li>
<li>全局定义的箭头函数的 this 指向 window</li>
</ul>
<h1 id="五、数据劫持"><a href="#五、数据劫持" class="headerlink" title="五、数据劫持"></a>五、数据劫持</h1><h3 id="1-数据描述符"><a href="#1-数据描述符" class="headerlink" title="1.数据描述符"></a>1.数据描述符</h3><ul>
<li>value 属性值默认 undefined</li>
<li>writable 可写默认 false</li>
<li>configurable 可配置默认 false</li>
<li>enumerable 可枚举默认 false<br><strong>自然创建的对象，数据描述符默认都是 true</strong></li>
</ul>
<h3 id="2-存取描述符"><a href="#2-存取描述符" class="headerlink" title="2.存取描述符"></a>2.存取描述符</h3><ul>
<li>get 的返回值对应 value</li>
<li>设置的值作为实参对应 set 的形参</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">tempValue</span>: <span class="string">&quot;abc&quot;</span>,</span><br><span class="line">  <span class="keyword">set</span> <span class="title">name</span>()&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.tempValue;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="keyword">get</span> <span class="title">name</span>(<span class="params">value</span>)&#123;</span><br><span class="line">    <span class="built_in">this</span>.tempValue = value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.name<span class="comment">//&quot;abc&quot;</span></span><br><span class="line">obj.name = <span class="number">10</span>;</span><br><span class="line">obj.name<span class="comment">//10</span></span><br></pre></td></tr></table></figure>

<h3 id="3-Proxy-amp-Reflect-代理植入"><a href="#3-Proxy-amp-Reflect-代理植入" class="headerlink" title="3.Proxy&amp;Reflect 代理植入"></a>3.Proxy&amp;Reflect 代理植入</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">  <span class="attr">value</span>: <span class="number">10</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> proxyData = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, &#123;</span><br><span class="line">  <span class="comment">//写</span></span><br><span class="line">  <span class="function"><span class="title">set</span>(<span class="params">target, key, value, receiver</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">Reflect</span>.set(target, key, value);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//读</span></span><br><span class="line">  <span class="function"><span class="title">get</span>(<span class="params">target, key, receiver</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Reflect</span>.get(target, key);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//in</span></span><br><span class="line">  <span class="function"><span class="title">has</span>(<span class="params">target, key</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//delete</span></span><br><span class="line">  <span class="function"><span class="title">deleteProperty</span>(<span class="params"></span>)</span> &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h1 id="六、类-Class"><a href="#六、类-Class" class="headerlink" title="六、类 Class"></a>六、类 Class</h1><h3 id="1-定义"><a href="#1-定义" class="headerlink" title="1.定义"></a>1.定义</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Father</span> </span>&#123;</span><br><span class="line">  <span class="comment">//实例对象的属性</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name, age</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//原型上的方法</span></span><br><span class="line">  <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(</span><br><span class="line">      <span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>, I am a <span class="subst">$&#123;<span class="built_in">this</span>.sex&#125;</span>, I am <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span> years old!`</span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//静态方法</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">tell</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>, I am <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span> years old!`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//ES7实例对象的属性</span></span><br><span class="line">  sex = <span class="string">&quot;boy&quot;</span>;</span><br><span class="line">  <span class="comment">//ES7静态属性</span></span><br><span class="line">  <span class="keyword">static</span> age = <span class="number">30</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> son1 = <span class="keyword">new</span> Father(<span class="string">&quot;son1&quot;</span>, <span class="number">10</span>);</span><br><span class="line"><span class="keyword">let</span> son2 = <span class="keyword">new</span> Father(<span class="string">&quot;son2&quot;</span>, <span class="number">5</span>);</span><br><span class="line">son1.say(); <span class="comment">//my name is son1, I am a boy, I am 10 years old!</span></span><br><span class="line">son2.say(); <span class="comment">//my name is son2, I am a boy, I am 5 years old!</span></span><br><span class="line">Father.tell(); <span class="comment">//my name is Father, I am 30 years old!</span></span><br></pre></td></tr></table></figure>

<h3 id="2-继承"><a href="#2-继承" class="headerlink" title="2.继承"></a>2.继承</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Grandpa</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">hair = <span class="string">&quot;黑发&quot;</span>, eyes = <span class="string">&quot;黑眼睛&quot;</span>, noes = <span class="string">&quot;高鼻梁&quot;</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.hair = hair;</span><br><span class="line">    <span class="built_in">this</span>.eyes = eyes;</span><br><span class="line">    <span class="built_in">this</span>.noes = noes;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my age is <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my skin is <span class="subst">$&#123;<span class="built_in">this</span>.skin&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my eyelid is <span class="subst">$&#123;<span class="built_in">this</span>.eyelid&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my eyes is <span class="subst">$&#123;<span class="built_in">this</span>.eyes&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my noes is <span class="subst">$&#123;<span class="built_in">this</span>.noes&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my hair is <span class="subst">$&#123;<span class="built_in">this</span>.hair&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Father</span> <span class="keyword">extends</span> <span class="title">Grandpa</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">skin = <span class="string">&quot;黄皮肤&quot;</span>, eyelid = <span class="string">&quot;双眼皮&quot;</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">super</span>();</span><br><span class="line">    <span class="built_in">this</span>.skin = skin;</span><br><span class="line">    <span class="built_in">this</span>.eyelid = eyelid;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Son</span> <span class="keyword">extends</span> <span class="title">Father</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name, age, skin, eyelid</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">super</span>(skin, eyelid);</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> son1 = <span class="keyword">new</span> Son(<span class="string">&quot;son1&quot;</span>, <span class="number">10</span>, <span class="string">&quot;黑皮肤&quot;</span>, <span class="string">&quot;单眼皮&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> son2 = <span class="keyword">new</span> Son(<span class="string">&quot;son2&quot;</span>, <span class="number">20</span>, <span class="string">&quot;白皮肤&quot;</span>, <span class="string">&quot;双眼皮&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="3-ES5-模拟-Class"><a href="#3-ES5-模拟-Class" class="headerlink" title="3.ES5 模拟 Class"></a>3.ES5 模拟 Class</h3><h3 id="4-ES7-提案（装饰器）"><a href="#4-ES7-提案（装饰器）" class="headerlink" title="4.ES7 提案（装饰器）"></a>4.ES7 提案（装饰器）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//.babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    <span class="string">&quot;@babel/preset-env&quot;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="string">&quot;plugins&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/plugin-proposal-decorators&quot;</span>, &#123;<span class="string">&quot;legacy&quot;</span>: <span class="literal">true</span>&#125;],</span><br><span class="line">    [<span class="string">&quot;@babel/plugin-proposal-class-properties&quot;</span>, &#123;<span class="string">&quot;loose&quot;</span>: <span class="literal">true</span>&#125;]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//class</span></span><br><span class="line"><span class="comment">//面向对象+面向切面</span></span><br><span class="line"><span class="keyword">let</span> inp = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.inp&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.btn&quot;</span>);</span><br><span class="line"></span><br><span class="line">@Skin</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Search</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.keyWords = <span class="string">&quot;&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  @myReadOnly</span><br><span class="line">  urlA = <span class="string">&quot;urlA-&quot;</span>;</span><br><span class="line">  @dealData(<span class="string">&quot;张三&quot;</span>)</span><br><span class="line">  <span class="function"><span class="title">getContent</span>(<span class="params">data,a,b</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;data&#125;</span>向<span class="subst">$&#123;<span class="built_in">this</span>.urlA&#125;</span>发送网络请求，数据：<span class="subst">$&#123;<span class="built_in">this</span>.keyWords&#125;</span>`</span>, a, b);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">10</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰私有属性</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myReadOnly</span>(<span class="params">prototype, key, descriptor</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(prototype, key, descriptor);</span><br><span class="line">  descriptor.writable = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* //装饰原型属性</span></span><br><span class="line"><span class="comment">function dealData(prototype, key, descriptor)&#123;</span></span><br><span class="line"><span class="comment">  console.log(prototype, key, descriptor);</span></span><br><span class="line"><span class="comment">  let oldValue = descriptor.value;</span></span><br><span class="line"><span class="comment">  descriptor.value = function ()&#123;</span></span><br><span class="line"><span class="comment">    let urlB = &quot;urlB-&quot;;</span></span><br><span class="line"><span class="comment">    console.log(`向$&#123;urlB&#125;发送网络请求，数据：$&#123;this.keyWords&#125;`);</span></span><br><span class="line"><span class="comment">    return oldValue.apply(this, arguments);</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰原型属性</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dealData</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">prototype, key, descriptor</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(prototype, key, descriptor);</span><br><span class="line">    <span class="keyword">let</span> oldValue = descriptor.value;</span><br><span class="line">    descriptor.value = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">let</span> urlB = <span class="string">&quot;urlB-&quot;</span>;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;data&#125;</span>向<span class="subst">$&#123;urlB&#125;</span>发送网络请求，数据：<span class="subst">$&#123;<span class="built_in">this</span>.keyWords&#125;</span>`</span>);</span><br><span class="line">      <span class="keyword">return</span> oldValue.call(<span class="built_in">this</span>, data, ...arguments);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰类</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Skin</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  target.aa = <span class="number">30</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> os = <span class="keyword">new</span> Search();</span><br><span class="line">inp.oninput = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  os.keyWords = <span class="built_in">this</span>.value;</span><br><span class="line">&#125;</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  os.getContent(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="七、数据存储"><a href="#七、数据存储" class="headerlink" title="七、数据存储"></a>七、数据存储</h1><h2 id="（一）Set"><a href="#（一）Set" class="headerlink" title="（一）Set"></a>（一）Set</h2><h3 id="1-创建-new-Set-data"><a href="#1-创建-new-Set-data" class="headerlink" title="1.创建 new Set(data)"></a>1.创建 new Set(data)</h3><ul>
<li>产生一个类似数组的机构，里面的值唯一</li>
<li>data 具备迭代接口的数据</li>
<li>Set 只存储唯一 value，不存储 key</li>
</ul>
<h3 id="2-原型方法"><a href="#2-原型方法" class="headerlink" title="2.原型方法"></a>2.原型方法</h3><ul>
<li>add(value)添加数据</li>
<li>delete(value)删除数据==value 必须与存储的一致否则删除不了（字面量形式就删除不了，用变量接受，存储变量）==</li>
<li>clear()清空数据</li>
<li>has(value)检测数据 true/false</li>
</ul>
<h3 id="3-遍历"><a href="#3-遍历" class="headerlink" title="3.遍历"></a>3.遍历</h3><ul>
<li>for…of 遍历迭代接口的数据</li>
<li>forEach 方法</li>
</ul>
<h3 id="4-转换"><a href="#4-转换" class="headerlink" title="4.转换"></a>4.转换</h3><ul>
<li>Array.form(Set)</li>
<li>[…Set]</li>
</ul>
<h3 id="5-应用"><a href="#5-应用" class="headerlink" title="5.应用"></a>5.应用</h3><ul>
<li>去重</li>
<li>差集</li>
<li>交集</li>
<li>并集</li>
</ul>
<h2 id="（二）Map"><a href="#（二）Map" class="headerlink" title="（二）Map"></a>（二）Map</h2><h3 id="1-创建-new-Map-key-value"><a href="#1-创建-new-Map-key-value" class="headerlink" title="1.创建 new Map([[key, value]])"></a>1.创建 new Map([[key, value]])</h3><ul>
<li>“做字典”</li>
<li>data 具备迭代接口的数据</li>
<li>Map 存储唯一 key-value 键值对</li>
<li>key 可以是任何形式</li>
</ul>
<h3 id="2-原型方法-1"><a href="#2-原型方法-1" class="headerlink" title="2.原型方法"></a>2.原型方法</h3><ul>
<li>Map(key, value)添加数据</li>
<li>get(key)获取数据==key 必须与存储的一致否则获取不了（字面量形式就获取不了，用变量接受，存储变量）==</li>
<li>delete(key)删除数据</li>
<li>keys()获取所有的键</li>
<li>has(key)检测数据</li>
</ul>
<h3 id="3-遍历-1"><a href="#3-遍历-1" class="headerlink" title="3.遍历"></a>3.遍历</h3><ul>
<li>for…of 遍历迭代接口的数据</li>
<li>forEach 方法</li>
</ul>
<h3 id="4-模拟（链接列表-桶、hash-算法）"><a href="#4-模拟（链接列表-桶、hash-算法）" class="headerlink" title="4.模拟（链接列表/*桶、hash 算法）"></a>4.模拟（链接列表/*桶、hash 算法）</h3><h1 id="八、异步编程"><a href="#八、异步编程" class="headerlink" title="八、异步编程"></a>八、异步编程</h1><h2 id="（一）Promise"><a href="#（一）Promise" class="headerlink" title="（一）Promise"></a>（一）Promise</h2><h3 id="1-执行顺序"><a href="#1-执行顺序" class="headerlink" title="1.执行顺序"></a>1.执行顺序</h3><ul>
<li>宏任务: 计时器、事件、ajax</li>
<li>微任务：Promise<ul>
<li>微任务有优先执行权</li>
</ul>
</li>
</ul>
<h3 id="2-使用"><a href="#2-使用" class="headerlink" title="2.使用"></a>2.使用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Promise对象，需要一个回调函数作为参数</span></span><br><span class="line"><span class="keyword">let</span> op = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//注册成功、失败函数</span></span><br><span class="line"><span class="comment">//返回值会向后传递</span></span><br><span class="line"><span class="comment">//此次的错误会被下一次的then的失败函数或catch捕获到</span></span><br><span class="line"><span class="comment">//此次若没有错误，则下次会执行成功函数</span></span><br><span class="line">op.then(</span><br><span class="line">  <span class="function"><span class="params">resolveData</span> =&gt;</span> &#123;&#125;,</span><br><span class="line">  <span class="function"><span class="params">rejectData</span> =&gt;</span> &#123;&#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">//捕获异常</span></span><br><span class="line"><span class="comment">//如果then在此之前捕获过，则不会捕获掉</span></span><br><span class="line"><span class="comment">//返回值不会传递</span></span><br><span class="line">op.catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//全部成功才成功，只要有一个promise失败就失败</span></span><br><span class="line"><span class="comment">//谁失败就用谁的</span></span><br><span class="line"><span class="comment">//全部成功就将参数统一成一个数组</span></span><br><span class="line">op.all([promise(), promise(), promise()]).then();</span><br><span class="line"></span><br><span class="line"><span class="comment">//只要有一个promise成功就成功，只要有一个promise失败就失败</span></span><br><span class="line"><span class="comment">//谁先成功就用谁的</span></span><br><span class="line"><span class="comment">//谁先失败就用谁的</span></span><br><span class="line">op.race([promise(), promise(), promise()]).then();</span><br></pre></td></tr></table></figure>

<h3 id="3-模拟"><a href="#3-模拟" class="headerlink" title="3.模拟"></a>3.模拟</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">syncFn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">  self.status = <span class="string">&quot;pending&quot;</span>; <span class="comment">//进行中</span></span><br><span class="line">  <span class="comment">//处理参数</span></span><br><span class="line">  self.resolveValue = <span class="literal">null</span>;</span><br><span class="line">  self.rejectReason = <span class="literal">null</span>;</span><br><span class="line">  <span class="comment">//处理异步</span></span><br><span class="line">  self.resolveCallBackList = [];</span><br><span class="line">  self.rejectCallBackList = [];</span><br><span class="line">  <span class="comment">//执行成功回调</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">resolve</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      self.status = <span class="string">&quot;fulfilled&quot;</span>; <span class="comment">//已成功</span></span><br><span class="line">      self.resolveValue = value; <span class="comment">//处理参数</span></span><br><span class="line">      self.resolveCallBackList.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>&#123; <span class="comment">//处理异步</span></span><br><span class="line">        res();</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//执行失败回调</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">reject</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      self.status = <span class="string">&quot;rejected&quot;</span>; <span class="comment">//已失败</span></span><br><span class="line">      self.rejectReason = reason; <span class="comment">//处理参数</span></span><br><span class="line">      self.rejectCallBackList.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">rej</span>) </span>&#123; <span class="comment">//处理异步</span></span><br><span class="line">        rej();</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//捕获syncFn中抛出的错误</span></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    syncFn(resolve, reject);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    reject(error); <span class="comment">//抛出错误，即已失败</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//处理then手动返回promise</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">  onFulfilled = onFulfilled || <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">  onRejected = onRejected || <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(reason);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//处理返回值promise</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">processor</span>(<span class="params">returnValue, nextFn, nextRes, nextRej</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (returnValue <span class="keyword">instanceof</span> MyPromise) &#123;</span><br><span class="line">      returnValue.then(<span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">        nextRes(value);</span><br><span class="line">      &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">        nextRej(reason);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      nextFn(returnValue);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//异步函数</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">makeAsync</span>(<span class="params">onFn, value, nextFn, nextRes, nextRej</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> returnValue = onFn(value);</span><br><span class="line">        processor(returnValue, nextFn, nextRes, nextRej); <span class="comment">//处理返回值promise</span></span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        nextRej(error)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;, <span class="number">0</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> nextPromise = <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span> (<span class="params">res, rej</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;fulfilled&quot;</span>) &#123;</span><br><span class="line">      makeAsync(onFulfilled, self.resolveValue, res, res, rej);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;rejected&quot;</span>) &#123;</span><br><span class="line">      makeAsync(onRejected, self.rejectReason, rej, res, rej);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> (onFulfilled) === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">        self.resolveCallBackList.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">          makeAsync(onFulfilled, self.resolveValue, res, res, rej);</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> (onRejected) === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">        self.rejectCallBackList.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">          makeAsync(onRejected, self.rejectReason, rej, res, rej);</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> nextPromise;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span>(<span class="params">promiseArr</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span>(<span class="params">res, rej</span>)</span>&#123;</span><br><span class="line">    promiseArr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">promise</span>)</span>&#123;</span><br><span class="line">      promise.then(res, rej);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span>(<span class="params">promiseArr</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> values = [];</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span>(<span class="params">res, rej</span>)</span>&#123;</span><br><span class="line">    promiseArr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">promise</span>)</span>&#123;</span><br><span class="line">      promise.then(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        values.push(value);</span><br><span class="line">        <span class="keyword">if</span>(values.length === promiseArr.length)&#123;</span><br><span class="line">          res(values);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>)</span>&#123;</span><br><span class="line">        rej(reason);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-promisify-化"><a href="#4-promisify-化" class="headerlink" title="4.promisify 化"></a>4.promisify 化</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">promisify</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...arg</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">      func(...arg, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (err) &#123;</span><br><span class="line">          rej(err);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          res(data);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">promisfyAll</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">let</span> fn = obj[key];</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> fn === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">      obj[key + <span class="string">&quot;Async&quot;</span>] = promisify(fn);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> read = promisify(fs.readFile);</span><br><span class="line"></span><br><span class="line">read(<span class="string">&quot;./data/number.txt&quot;</span>, <span class="string">&quot;utf-8&quot;</span>).then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promisfyAll(fs);</span><br><span class="line">fs.readFileAsync(<span class="string">&quot;./data/number.txt&quot;</span>, <span class="string">&quot;utf-8&quot;</span>).then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;asyn:&quot;</span>, val);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// let bluebird = require(&quot;bluebird&quot;);</span></span><br><span class="line"><span class="comment">// bluebird.promisify();</span></span><br><span class="line"><span class="comment">// bluebird.promisifyAll();</span></span><br></pre></td></tr></table></figure>
<hr>
<h2 id="（二）Iterator-迭代器"><a href="#（二）Iterator-迭代器" class="headerlink" title="（二）Iterator 迭代器"></a>（二）Iterator 迭代器</h2><h3 id="1-Symbol-数据类型"><a href="#1-Symbol-数据类型" class="headerlink" title="1.Symbol 数据类型"></a>1.Symbol 数据类型</h3><h4 id="（1）特点"><a href="#（1）特点" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>唯一性</li>
<li>可作为对象的属性</li>
<li>静态方法 Symbol.iterator</li>
</ul>
<h4 id="（2）添加迭代器"><a href="#（2）添加迭代器" class="headerlink" title="（2）添加迭代器"></a>（2）添加迭代器</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="number">0</span>: <span class="string">&quot;a&quot;</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="string">&quot;b&quot;</span>,</span><br><span class="line">  <span class="number">2</span>: <span class="string">&quot;c&quot;</span>,</span><br><span class="line">  <span class="attr">length</span>: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> curIndex = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> next = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">value</span>: <span class="built_in">this</span>[curIndex],</span><br><span class="line">        <span class="attr">done</span>: <span class="built_in">this</span>.length === curIndex++</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      next</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log([...obj]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> prop <span class="keyword">of</span> obj) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(prop);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-Generator-生成器"><a href="#2-Generator-生成器" class="headerlink" title="2.Generator 生成器"></a>2.Generator 生成器</h3><h4 id="（1）特点-1"><a href="#（1）特点-1" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>在 function 关键字与函数名之间加*,即为生成器</li>
<li>通过普通执行创建迭代器对象（==非 new==）</li>
<li>通过 yield 关键字控制分段执行</li>
</ul>
<h4 id="（2）使用"><a href="#（2）使用" class="headerlink" title="（2）使用"></a>（2）使用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">Test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> data1 = <span class="keyword">yield</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data1);</span><br><span class="line">  <span class="keyword">let</span> data2 = <span class="keyword">yield</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data2);</span><br><span class="line">  <span class="keyword">let</span> data3 = <span class="keyword">yield</span> <span class="string">&quot;c&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data3);</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;d&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> oG = Test();</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;0&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;1&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;2&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;3&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;4&quot;</span>));</span><br></pre></td></tr></table></figure>

<h4 id="（3）执行原理"><a href="#（3）执行原理" class="headerlink" title="（3）执行原理"></a>（3）执行原理</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">Test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data1 &lt;== next(<span class="string">&quot;1&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data1) ==&gt; <span class="string">&quot;1&quot;</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data2 &lt;== next(<span class="string">&quot;2&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data2) ==&gt; <span class="string">&quot;2&quot;</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="string">&quot;c&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data3 &lt;== next(<span class="string">&quot;3&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data3) ==&gt; <span class="string">&quot;3&quot;</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;d&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（4）应用"><a href="#（4）应用" class="headerlink" title="（4）应用"></a>（4）应用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="number">0</span>: <span class="string">&quot;a&quot;</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="string">&quot;b&quot;</span>,</span><br><span class="line">  <span class="number">2</span>: <span class="string">&quot;c&quot;</span>,</span><br><span class="line">  <span class="attr">length</span>: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="function"><span class="keyword">function</span>*(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> curIndex = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (curIndex &lt; <span class="built_in">this</span>.length) &#123;</span><br><span class="line">      <span class="keyword">yield</span> <span class="built_in">this</span>[curIndex++];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log([...obj]);</span><br></pre></td></tr></table></figure>

<hr>
<h2 id="（三）解决回调地狱"><a href="#（三）解决回调地狱" class="headerlink" title="（三）解决回调地狱"></a>（三）解决回调地狱</h2><h3 id="1-CallBack（jQuery）"><a href="#1-CallBack（jQuery）" class="headerlink" title="1.CallBack（jQuery）"></a>1.CallBack（jQuery）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">jQuery.myCallback = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> options = <span class="built_in">arguments</span>[<span class="number">0</span>] || <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="keyword">var</span> list = [];</span><br><span class="line">  <span class="keyword">var</span> fired = <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">var</span> fireIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> params = [];</span><br><span class="line">  <span class="keyword">var</span> call = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(; fireIndex &lt; list.length; fireIndex++)&#123;</span><br><span class="line">      list[fireIndex].apply(<span class="built_in">window</span>, params);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(options.includes(<span class="string">&quot;once&quot;</span>))&#123;</span><br><span class="line">      list = [];</span><br><span class="line">      fireIndex = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">typeof</span> fn === <span class="string">&quot;function&quot;</span> &amp;&amp; list.push(fn);</span><br><span class="line">      <span class="keyword">if</span>(options.includes(<span class="string">&quot;memory&quot;</span>) &amp;&amp; fired)&#123;</span><br><span class="line">        call();</span><br><span class="line">        fireIndex = <span class="number">0</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">fire</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      fireIndex = <span class="number">0</span>;</span><br><span class="line">      params = <span class="built_in">arguments</span>;</span><br><span class="line">      fired = <span class="literal">true</span>;</span><br><span class="line">      call();</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-Deferred（jQuery）"><a href="#2-Deferred（jQuery）" class="headerlink" title="2.Deferred（jQuery）"></a>2.Deferred（jQuery）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">jQuery.myDeferred = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> dfArr = [</span><br><span class="line">      [$.myCallback(<span class="string">&quot;once memory&quot;</span>), <span class="string">&quot;done&quot;</span>, <span class="string">&quot;resolve&quot;</span>],</span><br><span class="line">      [$.myCallback(<span class="string">&quot;once memory&quot;</span>), <span class="string">&quot;fail&quot;</span>, <span class="string">&quot;reject&quot;</span>],</span><br><span class="line">      [$.myCallback(<span class="string">&quot;memory&quot;</span>), <span class="string">&quot;progress&quot;</span>, <span class="string">&quot;notify&quot;</span>],</span><br><span class="line">    ];</span><br><span class="line">    <span class="keyword">var</span> deferred = &#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> status = <span class="literal">true</span>;</span><br><span class="line">    dfArr.forEach(<span class="function">(<span class="params">ele, index</span>)=&gt;</span>&#123;</span><br><span class="line">      deferred[ele[<span class="number">1</span>]] = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">        ele[<span class="number">0</span>].add(fn);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    dfArr.forEach(<span class="function">(<span class="params">ele, index</span>)=&gt;</span>&#123;</span><br><span class="line">      deferred[ele[<span class="number">2</span>]] = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(status)&#123;</span><br><span class="line">          ele[<span class="number">0</span>].fire.apply(<span class="built_in">window</span>, <span class="built_in">arguments</span>);</span><br><span class="line">          status = ele[<span class="number">2</span>] === <span class="string">&quot;notify&quot;</span> ? <span class="literal">true</span> : <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> deferred;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-co-解决回调地狱"><a href="#3-co-解决回调地狱" class="headerlink" title="3.co 解决回调地狱"></a>3.co 解决回调地狱</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> co = <span class="built_in">require</span>(<span class="string">&quot;co&quot;</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readData</span>(<span class="params">path</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.readFile(path, <span class="string">&quot;utf-8&quot;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (data) &#123;</span><br><span class="line">        res(data);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        rej(err);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// readData(&quot;./data/number.txt&quot;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return value;</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   console.log(value);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">read</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> val1 = <span class="keyword">yield</span> readData(<span class="string">&quot;./data/number.txt&quot;</span>);</span><br><span class="line">  <span class="keyword">let</span> val2 = <span class="keyword">yield</span> readData(val1);</span><br><span class="line">  <span class="keyword">let</span> val3 = <span class="keyword">yield</span> readData(val2);</span><br><span class="line">  <span class="keyword">return</span> val3;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//生成器优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  let &#123;value&#125; = oG.next();</span></span><br><span class="line"><span class="comment">  value.then(val1=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let &#123;value&#125; = oG.next(val1);</span></span><br><span class="line"><span class="comment">    value.then(val2=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value&#125; = oG.next(val2);</span></span><br><span class="line"><span class="comment">      value.then(val3=&gt;&#123;</span></span><br><span class="line"><span class="comment">        console.log(val3);</span></span><br><span class="line"><span class="comment">      &#125;)</span></span><br><span class="line"><span class="comment">    &#125;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125; </span></span><br><span class="line"><span class="comment">Co(read());</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归优化</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Co</span>(<span class="params">oG</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> next = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> &#123; value, done &#125; = oG.next(data);</span><br><span class="line">      <span class="keyword">if</span> (done) &#123;</span><br><span class="line">        res(value);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        value.then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">          next(val);</span><br><span class="line">        &#125;, rej);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    next();</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line">Co(read()).then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-async-await异步函数（ES7语法糖）"><a href="#4-async-await异步函数（ES7语法糖）" class="headerlink" title="4.async + await异步函数（ES7语法糖）"></a>4.async + await异步函数（ES7语法糖）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> co = <span class="built_in">require</span>(<span class="string">&quot;co&quot;</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readData</span>(<span class="params">path</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.readFile(path, <span class="string">&quot;utf-8&quot;</span>, <span class="function">(<span class="params">err, data</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(data)&#123;</span><br><span class="line">        res(data);</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        rej(err);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// readData(&quot;./data/number.txt&quot;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return value;</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   console.log(value);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* function *read()&#123;</span></span><br><span class="line"><span class="comment">  let val1 = yield readData(&quot;./data/number.txt&quot;);</span></span><br><span class="line"><span class="comment">  let val2 = yield readData(val1);</span></span><br><span class="line"><span class="comment">  let val3 = yield readData(val2);</span></span><br><span class="line"><span class="comment">  return val3;</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//生成器优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  let &#123;value&#125; = oG.next();</span></span><br><span class="line"><span class="comment">  value.then(val1=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let &#123;value&#125; = oG.next(val1);</span></span><br><span class="line"><span class="comment">    value.then(val2=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value&#125; = oG.next(val2);</span></span><br><span class="line"><span class="comment">      value.then(val3=&gt;&#123;</span></span><br><span class="line"><span class="comment">        console.log(val3);</span></span><br><span class="line"><span class="comment">      &#125;)</span></span><br><span class="line"><span class="comment">    &#125;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125; </span></span><br><span class="line"><span class="comment">Co(read());</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  return new Promise((res, rej)=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let next = data=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value, done&#125; = oG.next(data);</span></span><br><span class="line"><span class="comment">      if(done)&#123;</span></span><br><span class="line"><span class="comment">        res(value);</span></span><br><span class="line"><span class="comment">      &#125;else&#123;</span></span><br><span class="line"><span class="comment">        value.then(val=&gt;&#123;</span></span><br><span class="line"><span class="comment">          next(val);</span></span><br><span class="line"><span class="comment">        &#125;, rej)</span></span><br><span class="line"><span class="comment">      &#125;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    next();</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment">Co( read() ).then(value=&gt;&#123;</span></span><br><span class="line"><span class="comment">  console.log(value)</span></span><br><span class="line"><span class="comment">&#125;)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">read</span>(<span class="params">url</span>)</span>&#123;</span><br><span class="line">   <span class="keyword">try</span> &#123;</span><br><span class="line">     <span class="keyword">let</span> val1 = <span class="keyword">await</span> readData(url);</span><br><span class="line">     <span class="keyword">let</span> val2 = <span class="keyword">await</span> readData(val1);</span><br><span class="line">     <span class="keyword">let</span> val3 = <span class="keyword">await</span> readData(val2);</span><br><span class="line">     <span class="keyword">return</span> val3;</span><br><span class="line">   &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">     <span class="keyword">return</span> error;</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> read(<span class="string">&quot;./data/number.txt&quot;</span>).then(<span class="function"><span class="params">val</span>=&gt;</span>&#123;</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="string">&quot;async ==&gt;&gt;&quot;</span> , val);</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<hr>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/05/01/ES6a/" data-id="ckya9fc0w0008ygf68v6m0jqg"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-es6/" rel="tag">js es6</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-CSS3a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/04/01/CSS3a/"
    >CSS3 初识</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/04/01/CSS3a/" class="article-date">
  <time datetime="2018-03-31T16:00:00.000Z" itemprop="datePublished">2018-04-01</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      
  <div class="justified-gallery" id="gallery">
  
      <div>
        <a class="fancybox" data-fancybox="images" data-caption="img_caption" href="/blog/img_url" rel="gallery_ckya9fc0v0007ygf6199baz9a" title="img_caption">
          <img src="/blog/img_url" itemprop="image" alt="img_caption">
        </a>
      </div>
  
      <div>
        <a class="fancybox" data-fancybox="images" data-caption="img_caption" href="/blog/img_url" rel="gallery_ckya9fc0v0007ygf6199baz9a" title="img_caption">
          <img src="/blog/img_url" itemprop="image" alt="img_caption">
        </a>
      </div>
  
  </div>



      

      
      <h1 id="一、css3’s-compatible-history"><a href="#一、css3’s-compatible-history" class="headerlink" title="一、css3’s compatible history"></a>一、css3’s compatible history</h1><h2 id="（一）前缀与浏览器"><a href="#（一）前缀与浏览器" class="headerlink" title="（一）前缀与浏览器"></a>（一）前缀与浏览器</h2><h3 id="1-前缀与内核"><a href="#1-前缀与内核" class="headerlink" title="1.前缀与内核"></a>1.前缀与内核</h3><table>
<thead>
<tr>
<th align="center">prefix</th>
<th align="center">browser</th>
</tr>
</thead>
<tbody><tr>
<td align="center">-webkit-</td>
<td align="center">chrome/safari</td>
</tr>
<tr>
<td align="center">-moz-</td>
<td align="center">firefox</td>
</tr>
<tr>
<td align="center">-ms-</td>
<td align="center">IE</td>
</tr>
<tr>
<td align="center">-o-</td>
<td align="center">opera</td>
</tr>
</tbody></table>
<h3 id="2-兼容性处理"><a href="#2-兼容性处理" class="headerlink" title="2.兼容性处理"></a>2.兼容性处理</h3><ul>
<li>手册：<a target="_blank" rel="noopener" href="http://css.doyoe.com/">http://css.doyoe.com</a></li>
<li>权威：<a target="_blank" rel="noopener" href="http://www.caniuse.com/">http://www.caniuse.com</a></li>
<li>插件：autoprefixer 插件自动添加前缀</li>
</ul>
<h2 id="（二）预处理器与后处理器"><a href="#（二）预处理器与后处理器" class="headerlink" title="（二）预处理器与后处理器"></a>（二）预处理器与后处理器</h2><h3 id="1-pre-processor"><a href="#1-pre-processor" class="headerlink" title="1.pre-processor"></a>1.pre-processor</h3><ul>
<li>less</li>
<li>sass</li>
<li>cssNext</li>
</ul>
<h3 id="2-post-processor"><a href="#2-post-processor" class="headerlink" title="2.post-processor"></a>2.post-processor</h3><ul>
<li>autoprefixer</li>
</ul>
<h3 id="3-postCss"><a href="#3-postCss" class="headerlink" title="3.postCss"></a>3.postCss</h3><ul>
<li>用 js 实现的 css 抽象语法树 AST（Abstract Syntax Tree）</li>
<li>剩下的事留给插件去做</li>
</ul>
<hr>
<h1 id="二、selectors-of-css3"><a href="#二、selectors-of-css3" class="headerlink" title="二、selectors of css3"></a>二、selectors of css3</h1><h2 id="（一）relationship-selector"><a href="#（一）relationship-selector" class="headerlink" title="（一）relationship selector"></a>（一）relationship selector</h2><table>
<thead>
<tr>
<th align="left">selector</th>
<th align="left">mean</th>
</tr>
</thead>
<tbody><tr>
<td align="left">E F</td>
<td align="left">后代所有满足条件的子元素</td>
</tr>
<tr>
<td align="left">E &gt; F</td>
<td align="left">直接子元素</td>
</tr>
<tr>
<td align="left">E + F</td>
<td align="left">下一个满足条件的兄弟元素</td>
</tr>
<tr>
<td align="left">E ~ F</td>
<td align="left">之后所有满足条件的兄弟元素</td>
</tr>
</tbody></table>
<h2 id="（二）attribute-selector"><a href="#（二）attribute-selector" class="headerlink" title="（二）attribute selector"></a>（二）attribute selector</h2><table>
<thead>
<tr>
<th align="left">selector</th>
<th align="left">mean</th>
</tr>
</thead>
<tbody><tr>
<td align="left">E[attr ~= “a”]</td>
<td align="left">属性值中有单独 a 的元素</td>
</tr>
<tr>
<td align="left">E[attr |= “a”]</td>
<td align="left">属性值中以 a 或 a- 开头的元素</td>
</tr>
<tr>
<td align="left">E[attr ^= “a”]</td>
<td align="left">属性值中以 a 开头的元素</td>
</tr>
<tr>
<td align="left">E[attr $= “a”]</td>
<td align="left">属性值中以 a 结尾的元素</td>
</tr>
<tr>
<td align="left">E[attr *= “a”]</td>
<td align="left">属性值中包含 a 的元素</td>
</tr>
</tbody></table>
<h2 id="（三）pseudo-element-selector"><a href="#（三）pseudo-element-selector" class="headerlink" title="（三）pseudo-element selector"></a>（三）pseudo-element selector</h2><table>
<thead>
<tr>
<th align="left">selector</th>
<th align="left">mean</th>
</tr>
</thead>
<tbody><tr>
<td align="left">E::placeholder</td>
<td align="left">输入框提示文字，仅仅可以设置 color</td>
</tr>
<tr>
<td align="left">E::selection]</td>
<td align="left">文本选中效果，仅仅可以设置 color、background-color、text-shadow</td>
</tr>
</tbody></table>
<h2 id="（四）pseudo-classes-selector"><a href="#（四）pseudo-classes-selector" class="headerlink" title="（四）pseudo-classes selector"></a>（四）pseudo-classes selector</h2><ul>
<li><p>被选中元素的一种状态</p>
<table>
<thead>
<tr>
<th align="left">selector</th>
<th align="left">mean</th>
</tr>
</thead>
<tbody><tr>
<td align="left">:root</td>
<td align="left">根节点</td>
</tr>
<tr>
<td align="left">E:not(selector)</td>
<td align="left">排除</td>
</tr>
<tr>
<td align="left">E:target</td>
<td align="left">锚点选中</td>
</tr>
<tr>
<td align="left">E:first-child</td>
<td align="left">第一个子元素</td>
</tr>
<tr>
<td align="left">E:last-child</td>
<td align="left">最后一个子元素</td>
</tr>
<tr>
<td align="left">E:only-child</td>
<td align="left">仅仅一个子元素</td>
</tr>
<tr>
<td align="left">E:nth-child(n)</td>
<td align="left">顺序第 n 个子元素</td>
</tr>
<tr>
<td align="left">E:nth-last-child(n)</td>
<td align="left">逆序第 n 个子元素</td>
</tr>
<tr>
<td align="left">E:nth-child(odd)</td>
<td align="left">奇数个子元素</td>
</tr>
<tr>
<td align="left">E:nth-child(even)</td>
<td align="left">偶数个子元素</td>
</tr>
<tr>
<td align="left">E:first-of-type</td>
<td align="left">同类型第一个子元素</td>
</tr>
<tr>
<td align="left">E:last-of-type</td>
<td align="left">同类型最后一个子元素</td>
</tr>
<tr>
<td align="left">E:only-of-type</td>
<td align="left">同类型仅仅一个子元素</td>
</tr>
<tr>
<td align="left">E:nth-of-type(n)</td>
<td align="left">顺序同类型第 n 个子元素</td>
</tr>
<tr>
<td align="left">E:nth-last-of-type(n)</td>
<td align="left">逆序同类型第 n 个子元素</td>
</tr>
<tr>
<td align="left">E:empty</td>
<td align="left">内容为空的元素</td>
</tr>
<tr>
<td align="left">E:checked</td>
<td align="left">被选中表单元素</td>
</tr>
<tr>
<td align="left">E:enabled</td>
<td align="left">可用表单元素</td>
</tr>
<tr>
<td align="left">E:disabled</td>
<td align="left">被禁用表单元素</td>
</tr>
<tr>
<td align="left">E:read-only</td>
<td align="left">仅仅可读表单元素</td>
</tr>
<tr>
<td align="left">E:read-write</td>
<td align="left">可读可写用表单元素</td>
</tr>
</tbody></table>
</li>
</ul>
<hr>
<h1 id="三、border-of-css3"><a href="#三、border-of-css3" class="headerlink" title="三、border of css3"></a>三、border of css3</h1><h2 id="（一）border-radius"><a href="#（一）border-radius" class="headerlink" title="（一）border-radius"></a>（一）border-radius</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">border-top-left-radius</span>: <span class="number">10px</span> <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-top-right-radius</span>: <span class="number">10px</span> <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-bottom-right-radius</span>: <span class="number">10px</span> <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-bottom-left-radius</span>: <span class="number">10px</span> <span class="number">10px</span>;</span><br><span class="line"></span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span> / <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="./border-radius.png" alt="图解"></p>
<h2 id="（二）border-image"><a href="#（二）border-image" class="headerlink" title="（二）border-image"></a>（二）border-image</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-style</span>: solid;</span><br><span class="line">  <span class="attribute">border-color</span>: red;</span><br><span class="line">  <span class="attribute">border-image-source</span>: <span class="built_in">url</span>(); <span class="comment">/*linear-gradient redial-gradient*/</span></span><br><span class="line">  <span class="attribute">border-image-slice</span>: <span class="number">10</span> <span class="number">10</span> <span class="number">10</span> <span class="number">10</span>;</span><br><span class="line">  <span class="attribute">border-image-repeat</span>: stretch; <span class="comment">/*repeat round space*/</span></span><br><span class="line">  <span class="attribute">border-image-width</span>: <span class="number">1</span>; <span class="comment">/*倍数，若默认auto则取slice值加上px*/</span></span><br><span class="line">  <span class="attribute">border-image-outset</span>: <span class="number">0px</span>; <span class="comment">/*向外偏移*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>border-image-repeat 重复<ul>
<li>stretch 默认拉伸</li>
<li>repeat 对称重复填充</li>
<li>round 适当缩放填充</li>
<li>space 空白填充</li>
</ul>
</li>
</ul>
<p><img src="./border-image.png" alt="图解"></p>
<h2 id="（三）box-shadow"><a href="#（三）box-shadow" class="headerlink" title="（三）box-shadow"></a>（三）box-shadow</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> red, <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> green,</span><br><span class="line">              <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> blue, <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> pink;</span><br><span class="line"></span><br><span class="line">  <span class="attribute">box-shadow</span>: inset <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">10px</span> red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>内阴影</li>
<li>水平偏移（正右负左）</li>
<li>垂直偏移（正下负上）</li>
<li>模糊半径</li>
<li>缩放（四个方向同时增减设置值）</li>
<li>颜色<br><img src="./box-shadow.png" alt="图解"></li>
<li>文字在阴影之上，背景在阴影之下</li>
</ul>
<h1 id="四、background-of-css3"><a href="#四、background-of-css3" class="headerlink" title="四、background of css3"></a>四、background of css3</h1><h2 id="（一）background-color"><a href="#（一）background-color" class="headerlink" title="（一）background-color"></a>（一）background-color</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: black;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（二）background-image"><a href="#（二）background-image" class="headerlink" title="（二）background-image"></a>（二）background-image</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">url</span>(), <span class="built_in">url</span>(); <span class="comment">/*多张图片*/</span></span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">linear-gradient</span>(); <span class="comment">/*线性渐变*/</span></span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">radial-gradient</span>(); <span class="comment">/*径向渐变*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（三）background-repeat"><a href="#（三）background-repeat" class="headerlink" title="（三）background-repeat"></a>（三）background-repeat</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-repeat</span>: repeat; <span class="comment">/*默认水平、垂直重复平铺*/</span></span><br><span class="line">  <span class="attribute">background-repeat</span>: repeat-x; <span class="comment">/*水平重复，垂直不重复*/</span></span><br><span class="line">  <span class="attribute">background-repeat</span>: repeat-y; <span class="comment">/*水平不重复，垂直重复*/</span></span><br><span class="line">  <span class="attribute">background-repeat</span>: no-repeat; <span class="comment">/*水平、垂直不重复平铺*/</span></span><br><span class="line">  <span class="attribute">background-repeat</span>: round space; <span class="comment">/*水平适当缩放填充、垂直空白填充*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（四）background-origin"><a href="#（四）background-origin" class="headerlink" title="（四）background-origin"></a>（四）background-origin</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-origin</span>: padding-box; <span class="comment">/*默认从填充盒开始*/</span></span><br><span class="line">  <span class="attribute">background-origin</span>: border-box; <span class="comment">/*从边框盒开始*/</span></span><br><span class="line">  <span class="attribute">background-origin</span>: content-box; <span class="comment">/*从内容盒开始*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（五）background-clip"><a href="#（五）background-clip" class="headerlink" title="（五）background-clip"></a>（五）background-clip</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-clip</span>: border-box; <span class="comment">/*默认到边框盒结束*/</span></span><br><span class="line">  <span class="attribute">background-clip</span>: padding-box; <span class="comment">/*到填充盒结束*/</span></span><br><span class="line">  <span class="attribute">background-clip</span>: content-box; <span class="comment">/*到内容盒结束*/</span></span><br><span class="line">  <span class="attribute">background-clip</span>: text; <span class="comment">/*反向剪切非文字区域*/</span></span><br><span class="line">  -webkit-text-fill-<span class="attribute">color</span>: transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（六）background-position"><a href="#（六）background-position" class="headerlink" title="（六）background-position"></a>（六）background-position</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-position</span>: center; <span class="comment">/*默认水平、垂直居中*/</span></span><br><span class="line">  <span class="attribute">background-position</span>: top left; <span class="comment">/*靠上靠左*/</span></span><br><span class="line">  <span class="attribute">background-position</span>: <span class="number">100px</span>; <span class="comment">/*水平相对于origin偏移100px, 垂直居中*/</span></span><br><span class="line">  <span class="attribute">background-position</span>: <span class="number">50%</span> <span class="number">50%</span>; <span class="comment">/*水平相对于origin偏移50%, 垂直偏移50%*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（七）background-size"><a href="#（七）background-size" class="headerlink" title="（七）background-size"></a>（七）background-size</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-size</span>: auto; <span class="comment">/*默认不改变图片大小和比例*/</span></span><br><span class="line">  <span class="attribute">background-size</span>: cover; <span class="comment">/*按图片比例缩放，图片覆盖整个容器，图片可能会有溢出*/</span></span><br><span class="line">  <span class="attribute">background-size</span>: contain; <span class="comment">/*按图片比例缩放，容器包含整个图片，容器可能会有留白*/</span></span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100px</span>; <span class="comment">/*宽度100px, 高度按比例自动缩放*/</span></span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100px</span> <span class="number">200px</span>; <span class="comment">/*宽度100px, 高度200px, 图片可能会变形*/</span></span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">50%</span> <span class="number">50%</span>; <span class="comment">/*宽高缩小至原始大小的一半*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（八）background-attachment"><a href="#（八）background-attachment" class="headerlink" title="（八）background-attachment"></a>（八）background-attachment</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-attachment</span>: scroll; <span class="comment">/*默认相对于容器固定*/</span></span><br><span class="line">  <span class="attribute">background-attachment</span>: local; <span class="comment">/*相对于内容固定*/</span></span><br><span class="line">  <span class="attribute">background-attachment</span>: fixed; <span class="comment">/*相对于视口固定*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（九）渐变生成器"><a href="#（九）渐变生成器" class="headerlink" title="（九）渐变生成器"></a>（九）渐变生成器</h2><h3 id="1-linear-gradient"><a href="#1-linear-gradient" class="headerlink" title="1.linear-gradient()"></a>1.linear-gradient()</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(red, orange); <span class="comment">/*默认重上到下渐变*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(red, <span class="number">50%</span>, orange); <span class="comment">/*改变中心点*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to bottom, red, orange); <span class="comment">/*设置方向*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to bottom right, red, orange); <span class="comment">/*对角渐变*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">180deg</span>, red, orange); <span class="comment">/*设置角度*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">180deg</span>, red <span class="number">20%</span>, orange <span class="number">100%</span>); <span class="comment">/*设置每种颜色渐变起点*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="./angle.jpg" alt="图解angle"></p>
<h3 id="2-radial-gradient"><a href="#2-radial-gradient" class="headerlink" title="2.radial-gradient()"></a>2.radial-gradient()</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(red, orange); <span class="comment">/*默认重上到下渐变*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(at <span class="number">0%</span> <span class="number">0%</span>, red, orange); <span class="comment">/*改变中心点*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*设置每种颜色渐变起点*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*圆形放射*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(ellipse at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*椭圆放射*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(ellipse closest-side at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*放射至最近的边结束*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(ellipse closest-corner at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*放射至最近的角结束*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(ellipse farthest-side at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*放射至最远的边结束*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(ellipse farthest-corner at <span class="number">0%</span> <span class="number">0%</span>, red <span class="number">20%</span>, orange <span class="number">80%</span>); <span class="comment">/*放射至最远的角结束*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-repeating-linear-gradient"><a href="#3-repeating-linear-gradient" class="headerlink" title="3.repeating-linear-gradient()"></a>3.repeating-linear-gradient()</h3><h3 id="4-repeating-radial-gradient"><a href="#4-repeating-radial-gradient" class="headerlink" title="4.repeating-radial-gradient()"></a>4.repeating-radial-gradient()</h3><hr>
<h1 id="五、text"><a href="#五、text" class="headerlink" title="五、text"></a>五、text</h1><h2 id="（一）text-shadow"><a href="#（一）text-shadow" class="headerlink" title="（一）text-shadow"></a>（一）text-shadow</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">text-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>水平偏移量</li>
<li>垂直偏移量</li>
<li>模糊半径</li>
<li>颜色</li>
</ul>
<h2 id="（二）text-stroke"><a href="#（二）text-stroke" class="headerlink" title="（二）text-stroke"></a>（二）text-stroke</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  -webkit-text-stroke: <span class="number">0px</span> red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>描边宽度</li>
<li>描边颜色</li>
</ul>
<h2 id="（三）-font-face"><a href="#（三）-font-face" class="headerlink" title="（三）@font-face"></a>（三）@font-face</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;fontName&quot;</span>;</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>();</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>() <span class="built_in">format</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;fontName&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="（四）column"><a href="#（四）column" class="headerlink" title="（四）column"></a>（四）column</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">column-width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">column-count</span>: <span class="number">4</span>;</span><br><span class="line">  <span class="attribute">column-gap</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">column-rule</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">column-span</span>: all;</span><br><span class="line">  <span class="attribute">column-fill</span>: balance;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>最小宽度</li>
<li>最大列数</li>
<li>间隙</li>
<li>分割线</li>
<li>跨列</li>
<li>列高</li>
</ul>
<hr>
<h1 id="六、box"><a href="#六、box" class="headerlink" title="六、box"></a>六、box</h1><h2 id="（一）混杂模式-box"><a href="#（一）混杂模式-box" class="headerlink" title="（一）混杂模式 box"></a>（一）混杂模式 box</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>W3C standards mode:<ul>
<li>boxWidth = width + padding(2) + border(2)</li>
<li>boxHeight = height + padding(2) + border(2)</li>
</ul>
</li>
<li>IE6 quirks mode:<ul>
<li>boxWidth = width</li>
<li>boxHeight = height</li>
</ul>
</li>
</ul>
<h2 id="（二）overflow"><a href="#（二）overflow" class="headerlink" title="（二）overflow"></a>（二）overflow</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: visible;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">overflow</span>: scroll;</span><br><span class="line">  <span class="attribute">overflow</span>: auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>默认溢出显示</li>
<li>溢出隐藏</li>
<li>溢出滚动</li>
<li>溢出滚动</li>
<li>当一个方向设置非 visible 值，另一个就默认设置为 auto</li>
<li>resize 调整元素大小需要配合 overflow 属性使用才有效果</li>
</ul>
<hr>
<h2 id="（三）弹性盒子-flex"><a href="#（三）弹性盒子-flex" class="headerlink" title="（三）弹性盒子 flex"></a>（三）弹性盒子 flex</h2><h3 id="1-容器"><a href="#1-容器" class="headerlink" title="1.容器"></a>1.容器</h3><h4 id="（1）声明一个弹性容器"><a href="#（1）声明一个弹性容器" class="headerlink" title="（1）声明一个弹性容器"></a>（1）声明一个弹性容器</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="comment">/*弹性容器*/</span></span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">display</span>: inline-flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（2）主轴方向"><a href="#（2）主轴方向" class="headerlink" title="（2）主轴方向"></a>（2）主轴方向</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row; <span class="comment">/*默认横向从左至右*/</span></span><br><span class="line">  <span class="attribute">flex-direction</span>: row-reverse; <span class="comment">/*主轴横向从右至左*/</span></span><br><span class="line">  <span class="attribute">flex-direction</span>: column; <span class="comment">/*主轴纵向从上至下*/</span></span><br><span class="line">  <span class="attribute">flex-direction</span>: column-reverse; <span class="comment">/*主轴纵向从下至上*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（3）换行规则"><a href="#（3）换行规则" class="headerlink" title="（3）换行规则"></a>（3）换行规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap; <span class="comment">/*默认不换行,若排列不下，则进行压缩*/</span></span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap; <span class="comment">/*向下换行，不会压缩，排列不下就进行换行*/</span></span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap-reverse; <span class="comment">/*向上换行，不会压缩，排列不下就进行换行*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><font color=red size=5>flex-flow: row nowrap; 复合属性：主轴方向 + 换行规则</font></p>
<h4 id="（4）主轴上项目排列规则"><a href="#（4）主轴上项目排列规则" class="headerlink" title="（4）主轴上项目排列规则"></a>（4）主轴上项目排列规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">justify-content</span>: flex-start; <span class="comment">/*默认头部对齐*/</span></span><br><span class="line">  <span class="attribute">justify-content</span>: center; <span class="comment">/*中部对齐*/</span></span><br><span class="line">  <span class="attribute">justify-content</span>: flex-end; <span class="comment">/*尾部对齐*/</span></span><br><span class="line">  <span class="attribute">justify-content</span>: space-between; <span class="comment">/*两端对齐，间隙均匀*/</span></span><br><span class="line">  <span class="attribute">justify-content</span>: space-around; <span class="comment">/*分散对齐，项目margin均匀*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（5）交叉轴上项目排列规则"><a href="#（5）交叉轴上项目排列规则" class="headerlink" title="（5）交叉轴上项目排列规则"></a>（5）交叉轴上项目排列规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">align-items</span>: stretch; <span class="comment">/*若没有设置高度，默认自适应容器高度*/</span></span><br><span class="line">  <span class="attribute">align-items</span>: flex-start; <span class="comment">/*头部对齐*/</span></span><br><span class="line">  <span class="attribute">align-items</span>: center; <span class="comment">/*中部对齐*/</span></span><br><span class="line">  <span class="attribute">align-items</span>: flex-end; <span class="comment">/*尾部对齐*/</span></span><br><span class="line">  <span class="attribute">align-items</span>: baseline; <span class="comment">/*基线对齐*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（6）主轴在容器中的排列规则（基于多轴操作）"><a href="#（6）主轴在容器中的排列规则（基于多轴操作）" class="headerlink" title="（6）主轴在容器中的排列规则（基于多轴操作）"></a>（6）主轴在容器中的排列规则（基于多轴操作）</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">align-content</span>: stretch; <span class="comment">/*默认占满交叉轴,一端对齐交叉轴头部，间隙均匀*/</span></span><br><span class="line">  <span class="attribute">align-content</span>: flex-start; <span class="comment">/*对齐交叉轴头部，无间隙排列*/</span></span><br><span class="line">  <span class="attribute">align-content</span>: center; <span class="comment">/*对齐交叉轴中部，无间隙排列*/</span></span><br><span class="line">  <span class="attribute">align-content</span>: flex-end; <span class="comment">/*对齐交叉轴尾部，无间隙排列*/</span></span><br><span class="line">  <span class="attribute">align-content</span>: space-between; <span class="comment">/*两端对齐，间隙均匀*/</span></span><br><span class="line">  <span class="attribute">align-content</span>: space-around; <span class="comment">/*分散对齐，margin均匀*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="2-项目"><a href="#2-项目" class="headerlink" title="2.项目"></a>2.项目</h3><h4 id="（1）项目的排列顺序"><a href="#（1）项目的排列顺序" class="headerlink" title="（1）项目的排列顺序"></a>（1）项目的排列顺序</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">order</span>: <span class="number">0</span>; <span class="comment">/*默认按结构顺序顺主轴顺序依次排列*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>order 数值越小在主轴平面上越靠前，在视觉层面上越靠后（类似于依次上升的台阶面）</strong></p>
<h4 id="（2）项目分配剩余空间的规则"><a href="#（2）项目分配剩余空间的规则" class="headerlink" title="（2）项目分配剩余空间的规则"></a>（2）项目分配剩余空间的规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">flex-grow</span>: <span class="number">0</span>; <span class="comment">/*默认不延伸*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>兄弟项目按照分配比例占有剩余空间</strong></p>
<h4 id="（3）项目分摊超出空间的规则"><a href="#（3）项目分摊超出空间的规则" class="headerlink" title="（3）项目分摊超出空间的规则"></a>（3）项目分摊超出空间的规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">flex-shrink</span>: <span class="number">0</span>; <span class="comment">/*默认不压缩*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>1.兄弟项目按照分摊比例和自身实际内容盒大小退让空间</strong><br><strong>2.被不折行内容撑开的项目不参与分摊</strong><br><strong>3.项目的 margin、border、padding 不参与分摊，即使超出也不会压缩</strong><br><img src="./shrink.png" alt="图解"></p>
<h4 id="（4）项目所占主轴的基础空间"><a href="#（4）项目所占主轴的基础空间" class="headerlink" title="（4）项目所占主轴的基础空间"></a>（4）项目所占主轴的基础空间</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">flex-basis</span>: auto; <span class="comment">/*默认项目的原大小*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>1.basis 基础空间通常是 min-width, width 空间通常是 max-width</strong><br><strong>2.empty 空元素通常以 basis 基础空间占有真实空间</strong><br><strong>3.若 basis 基础空间设置比 width 大，则 width 失去意义</strong><br><strong>4.若 basis 基础空间设置比 width 小，内容不折行把项目撑大，则 width 是可撑大的 max 最大极限</strong><br><font color=red size=5>flex: 0 0 auto; 复合属性：分配规则 + 分摊规则 + 基础空间</font></p>
<h4 id="（5）项目在交叉轴上的个性排列规则"><a href="#（5）项目在交叉轴上的个性排列规则" class="headerlink" title="（5）项目在交叉轴上的个性排列规则"></a>（5）项目在交叉轴上的个性排列规则</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">align-self</span>: auto; <span class="comment">/*默认继承，若没有继承则等同于stretch*/</span></span><br><span class="line">  <span class="attribute">align-self</span>: flex-start; <span class="comment">/*头部对齐*/</span></span><br><span class="line">  <span class="attribute">align-self</span>: center; <span class="comment">/*中部对齐*/</span></span><br><span class="line">  <span class="attribute">align-self</span>: flex-end; <span class="comment">/*尾部对齐*/</span></span><br><span class="line">  <span class="attribute">align-self</span>: baseline; <span class="comment">/*基线对齐*/</span></span><br><span class="line">  <span class="attribute">align-self</span>: stretch; <span class="comment">/*若没有设置高度，自适应高度*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>项目设置的交叉轴个性排列 align-self 优于容器设置的交叉轴排列 align-items</strong><br><strong>项目设置的交叉轴个性排列 align-self 依然受容器设置的主轴排列 align-content 约束</strong></p>
<hr>
<h1 id="七、transition"><a href="#七、transition" class="headerlink" title="七、transition"></a>七、transition</h1><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">1s</span> ease <span class="number">1s</span>; <span class="comment">/*复合属性*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">transition-property</span>: all; <span class="comment">/*监听属性*/</span></span><br><span class="line">  <span class="attribute">transition-duration</span>: <span class="number">1s</span>; <span class="comment">/*总时长*/</span></span><br><span class="line">  <span class="attribute">transition-timing-function</span>: <span class="built_in">cubic-bezier</span>(t1, s1, t2, s2); <span class="comment">/*运动曲线*/</span></span><br><span class="line">  <span class="attribute">transition-delay</span>: <span class="number">1s</span>; <span class="comment">/*延迟*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="八、animation"><a href="#八、animation" class="headerlink" title="八、animation"></a>八、animation</h1><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> name &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">25%</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">75%</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: name <span class="number">1s</span> ease <span class="number">1s</span>; <span class="comment">/*复合属性*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-name</span>: name; <span class="comment">/*动画名与keyframes对应*/</span></span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">1s</span>; <span class="comment">/*总时长*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-timing-function</span>: <span class="built_in">cubic-bezier</span>(t1, s1, t2, s2); <span class="comment">/*运动曲线*/</span></span><br><span class="line">  <span class="attribute">animation-timing-function</span>: ease; <span class="comment">/*运动曲线*/</span></span><br><span class="line">  <span class="attribute">animation-timing-function</span>: <span class="built_in">steps</span>(</span><br><span class="line">    count,</span><br><span class="line">    end</span><br><span class="line">  ); <span class="comment">/*运动步数, end保留当前帧直到这段动画时间结束*/</span></span><br><span class="line">  <span class="attribute">animation-timing-function</span>: <span class="built_in">steps</span>(</span><br><span class="line">    count,</span><br><span class="line">    start</span><br><span class="line">  ); <span class="comment">/*运动步数, start保留下一帧直到这段动画时间结束*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-delay</span>: <span class="number">1s</span>; <span class="comment">/*延迟*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-iteration-count</span>: <span class="number">1</span>; <span class="comment">/*循环次数,默认循环一次*/</span></span><br><span class="line">  <span class="attribute">animation-iteration-count</span>: infinite; <span class="comment">/*无限循环*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-direction</span>: normal; <span class="comment">/*方向，默认正向运行*/</span></span><br><span class="line">  <span class="attribute">animation-direction</span>: reverse; <span class="comment">/*反向运行*/</span></span><br><span class="line">  <span class="attribute">animation-direction</span>: alternate; <span class="comment">/*单数次正向，双数次反向*/</span></span><br><span class="line">  <span class="attribute">animation-direction</span>: alternate-reverse; <span class="comment">/*双数次正向，当数次反向*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-play-state</span>: running; <span class="comment">/*运动状态*/</span></span><br><span class="line">  <span class="attribute">animation-play-state</span>: paused; <span class="comment">/*暂停状态*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">animation-fill-mode</span>: none; <span class="comment">/*默认不应用*/</span></span><br><span class="line">  <span class="attribute">animation-fill-mode</span>: forwards; <span class="comment">/*结束保留最后一帧状态*/</span></span><br><span class="line">  <span class="attribute">animation-fill-mode</span>: backwards; <span class="comment">/*开始应用第一帧状态*/</span></span><br><span class="line">  <span class="attribute">animation-fill-mode</span>: both; <span class="comment">/*开始、结束都应用*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>from 可代替 0%，to 代替 100%，也可混合使用</li>
<li>运动曲线会应用在每一段动画上，无法单段控制，也不是控制整个动画</li>
<li>延迟只会用在第一次动画之前，循环多次的看作整体动画，每一次之前并不会延迟</li>
<li>在 steps 中，end 丢失最后一针可以用 forwards 弥补，但 start 丢失的第一帧无法用 backwords 弥补，除非有延迟</li>
<li>steps(1, end) 可简写成 step-end; steps(1, start) 可以简写成 step-start</li>
</ul>
<hr>
<h1 id="九、transform"><a href="#九、transform" class="headerlink" title="九、transform"></a>九、transform</h1><h2 id="（一）rotate-旋转"><a href="#（一）rotate-旋转" class="headerlink" title="（一）rotate 旋转"></a>（一）rotate 旋转</h2><h3 id="1-rotate-angle"><a href="#1-rotate-angle" class="headerlink" title="1.rotate(angle)"></a>1.rotate(angle)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">90deg</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0.25turn</span>);</span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform-origin</span>: center center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>2d 旋转</li>
<li>正度数顺时针，负度数逆时针</li>
<li>transform-origin 设置旋转中心（0，0）相当于左上角点</li>
</ul>
<h3 id="2-rotateX-angle-、rotateY-angle-、rotateZ-angle"><a href="#2-rotateX-angle-、rotateY-angle-、rotateZ-angle" class="headerlink" title="2.rotateX(angle)、rotateY(angle)、rotateZ(angle)"></a>2.rotateX(angle)、rotateY(angle)、rotateZ(angle)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(<span class="number">45deg</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">45deg</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-<span class="number">45deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>3d 旋转</li>
<li>沿着坐标轴旋转</li>
<li>在 3d 旋转中坐标轴会跟随旋转一起变化，旋转顺序不同，即使旋转角度一样，旋转效果也不一样</li>
</ul>
<h3 id="3-rotate3d-x-y-z-angle"><a href="#3-rotate3d-x-y-z-angle" class="headerlink" title="3.rotate3d(x,y,z,angle)"></a>3.rotate3d(x,y,z,angle)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate3d</span>(<span class="number">1</span>, <span class="number">1</span>, <span class="number">0</span>, <span class="number">45deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>3d 旋转</li>
<li>x,y,z 的比例定义一条空间矢量射线，这条射线即为旋转轴</li>
</ul>
<hr>
<h2 id="（二）scale-伸缩"><a href="#（二）scale-伸缩" class="headerlink" title="（二）scale 伸缩"></a>（二）scale 伸缩</h2><h3 id="1-scale-x-y"><a href="#1-scale-x-y" class="headerlink" title="1.scale(x, y)"></a>1.scale(x, y)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>2d 伸缩</li>
<li>scale 伸缩的是变化坐标轴的刻度</li>
<li>伸缩轴会随旋转而发生变化</li>
<li>伸缩会保留影响，所以伸缩顺序的不同，效果也不同</li>
<li>书写多个不会覆盖，而是叠加操作，例如 scale(0.5, 0.5), scale(3, 3)相当于 scale(1.5, 1.5)</li>
<li>书写只设置一个值，相当于设置了两个一样的值</li>
</ul>
<h3 id="2-scaleX-num-、scaleY-num-、scaleZ-num-、scale3d-x-y-z"><a href="#2-scaleX-num-、scaleY-num-、scaleZ-num-、scale3d-x-y-z" class="headerlink" title="2.scaleX(num)、scaleY(num)、scaleZ(num)、scale3d(x,y,z)"></a>2.scaleX(num)、scaleY(num)、scaleZ(num)、scale3d(x,y,z)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scaleX</span>(<span class="number">2</span>); <span class="comment">/*X轴刻度为原来的2倍*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(<span class="number">3</span>); <span class="comment">/*Y轴刻度为原来的3倍*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scaleZ</span>(<span class="number">0.5</span>); <span class="comment">/*Z轴刻度为原来的0.5倍*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale3d</span>(<span class="number">2</span>, <span class="number">3</span>, <span class="number">0.5</span>); <span class="comment">/*复合属性*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>3d 伸缩</li>
<li>scale3d 为简写属性</li>
</ul>
<hr>
<h2 id="（三）skew-扭曲"><a href="#（三）skew-扭曲" class="headerlink" title="（三）skew 扭曲"></a>（三）skew 扭曲</h2><h3 id="1-skew-angle-angle-、skewX-angle-、skewY-angle"><a href="#1-skew-angle-angle-、skewX-angle-、skewY-angle" class="headerlink" title="1.skew(angle,angle)、skewX(angle)、skewY(angle)"></a>1.skew(angle,angle)、skewX(angle)、skewY(angle)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">skew</span>(<span class="number">45deg</span>, <span class="number">90deg</span>); <span class="comment">/*复合属性*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">skewX</span>(<span class="number">45deg</span>); <span class="comment">/*y轴顺时针向x轴倾斜45度*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">skewY</span>(-<span class="number">45deg</span>); <span class="comment">/*x轴逆时针向y轴倾斜45度*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>2d 扭曲</li>
<li>skew 倾斜的是坐标轴，会保留影响</li>
<li>skew 不仅倾斜坐标轴，而且也会拉伸坐标轴刻度</li>
</ul>
<hr>
<h2 id="（四）translate-平移"><a href="#（四）translate-平移" class="headerlink" title="（四）translate 平移"></a>（四）translate 平移</h2><h3 id="1-translate-x-y-、translateX-num-、translateY-num"><a href="#1-translate-x-y-、translateX-num-、translateY-num" class="headerlink" title="1.translate(x, y)、translateX(num)、translateY(num)"></a>1.translate(x, y)、translateX(num)、translateY(num)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">100px</span>, <span class="number">100px</span>); <span class="comment">/*复合属性*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">100px</span>); <span class="comment">/*沿着x轴正方向平移100px*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100px</span>); <span class="comment">/*沿着y轴负方向平移100px*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>2d 平移</li>
</ul>
<h3 id="2-translate3d-x-y-z-、translateX-num-、translateY-num-、translateZ-num"><a href="#2-translate3d-x-y-z-、translateX-num-、translateY-num-、translateZ-num" class="headerlink" title="2.translate3d(x, y, z)、translateX(num)、translateY(num)、translateZ(num)"></a>2.translate3d(x, y, z)、translateX(num)、translateY(num)、translateZ(num)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">100px</span>, <span class="number">100px</span>, -<span class="number">100px</span>); <span class="comment">/*复合属性*/</span></span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">100px</span>); <span class="comment">/*沿着x轴正方向平移100px*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100px</span>); <span class="comment">/*沿着y轴负方向平移100px*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(-<span class="number">100px</span>); <span class="comment">/*沿着z轴负方向平移100px*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>3d 平移</li>
</ul>
<hr>
<h2 id="（五）perspective-景深"><a href="#（五）perspective-景深" class="headerlink" title="（五）perspective 景深"></a>（五）perspective 景深</h2><ul>
<li><font color=red size=5>视觉所看到的效果全都是元素的投影</font></li>
</ul>
<h3 id="1-容器上的景深"><a href="#1-容器上的景深" class="headerlink" title="1.容器上的景深"></a>1.容器上的景深</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">perspective</span>: <span class="number">800px</span>;</span><br><span class="line">  <span class="attribute">perspective-origin</span>: center center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（1）-元素不动，无论景深大小，元素始终不变"><a href="#（1）-元素不动，无论景深大小，元素始终不变" class="headerlink" title="（1）.元素不动，无论景深大小，元素始终不变"></a>（1）.元素不动，无论景深大小，元素始终不变</h4><img src="./perspective (1).png">
<img src="./perspective (2).png">

<h4 id="（2）-景深不变，元素在-Z-轴方向上，越向正方形移动则月大；越向负方向移动则越小"><a href="#（2）-景深不变，元素在-Z-轴方向上，越向正方形移动则月大；越向负方向移动则越小" class="headerlink" title="（2）.景深不变，元素在 Z 轴方向上，越向正方形移动则月大；越向负方向移动则越小"></a>（2）.景深不变，元素在 Z 轴方向上，越向正方形移动则月大；越向负方向移动则越小</h4><img src="./perspective (3).png">
<img src="./perspective (4).png">

<h4 id="（3）-元素在-Z-轴负方上的时候，景深越小，元素越小"><a href="#（3）-元素在-Z-轴负方上的时候，景深越小，元素越小" class="headerlink" title="（3）.元素在 Z 轴负方上的时候，景深越小，元素越小"></a>（3）.元素在 Z 轴负方上的时候，景深越小，元素越小</h4><img src="./perspective (5).png">
<img src="./perspective (6).png">

<h3 id="2-项目上的景深"><a href="#2-项目上的景深" class="headerlink" title="2.项目上的景深"></a>2.项目上的景深</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">perspective</span>(<span class="number">800px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>项目上的景深视角可不设置，默认在元素的 center center；</li>
<li>景深的取值范围 1 到正无穷，默认值 none；</li>
<li>景深的效果可叠加</li>
</ul>
<h3 id="3-容器-3d-堆叠上下文"><a href="#3-容器-3d-堆叠上下文" class="headerlink" title="3.容器 3d 堆叠上下文"></a>3.容器 3d 堆叠上下文</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">transform-style</span>: flat; <span class="comment">/*默认2d*/</span></span><br><span class="line">  <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d; <span class="comment">/*3d*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-项目上的空间变换中心"><a href="#4-项目上的空间变换中心" class="headerlink" title="4.项目上的空间变换中心"></a>4.项目上的空间变换中心</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">100px</span> <span class="number">100px</span> <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-背面是否可见"><a href="#5-背面是否可见" class="headerlink" title="5.背面是否可见"></a>5.背面是否可见</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">  <span class="attribute">backface-visibility</span>: visible; <span class="comment">/*默认可见*/</span></span><br><span class="line">  <span class="attribute">backface-visibility</span>: hidden; <span class="comment">/*不可见*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h2 id="（六）matrix-矩阵"><a href="#（六）matrix-矩阵" class="headerlink" title="（六）matrix 矩阵"></a>（六）matrix 矩阵</h2><h3 id="1-2D-matrix-a-b-c-d-e-f"><a href="#1-2D-matrix-a-b-c-d-e-f" class="headerlink" title="1.2D matrix(a,b,c,d,e,f)"></a>1.2D matrix(a,b,c,d,e,f)</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">|a|c|e| * |X| = |aX + cY + 0|</span><br><span class="line">|b|d|f| * |Y| = |bX + dY + 0|</span><br><span class="line">|0|0|1| * |0| = |0|</span><br></pre></td></tr></table></figure>

<h3 id="2-3D-matrix-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16"><a href="#2-3D-matrix-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16" class="headerlink" title="2.3D matrix(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)"></a>2.3D matrix(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">|1|5|9 |13| * |X| = |1X + 5Y + 9Z + 0|</span><br><span class="line">|2|6|10|14| * |Y| = |2X + 6Y + 10Z + 0|</span><br><span class="line">|3|7|11|15| * |Z| = |3X + 7Y + 11Z + 0|</span><br><span class="line">|4|8|12|16| * |0| = |4X + 8Y + 12Z + 0|</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="十、网页设计"><a href="#十、网页设计" class="headerlink" title="十、网页设计"></a>十、网页设计</h1><h2 id="（一）显示器成像原理"><a href="#（一）显示器成像原理" class="headerlink" title="（一）显示器成像原理"></a>（一）显示器成像原理</h2><h3 id="1-空间混色法"><a href="#1-空间混色法" class="headerlink" title="1.空间混色法"></a>1.空间混色法</h3><h4 id="（1）像点"><a href="#（1）像点" class="headerlink" title="（1）像点"></a>（1）像点</h4><ul>
<li>一个像素由r、g、b三个像点构成</li>
<li>像点材料实际是平铺的<img src="./pin.png">
<img src="./shange.png"></li>
</ul>
<h4 id="（2）点距"><a href="#（2）点距" class="headerlink" title="（2）点距"></a>（2）点距</h4><ul>
<li>相同像点的间距<img src="./pin-x.png">
<img src="./shange-x.png"></li>
</ul>
<h4 id="（3）CRT显示屏"><a href="#（3）CRT显示屏" class="headerlink" title="（3）CRT显示屏"></a>（3）CRT显示屏</h4><ul>
<li>电子枪 → 高频电子束 → 荫罩层 → 荧光粉<img src="./CRT.png"></li>
</ul>
<h4 id="（4）LCD液晶屏"><a href="#（4）LCD液晶屏" class="headerlink" title="（4）LCD液晶屏"></a>（4）LCD液晶屏</h4><ul>
<li>光 → 磁场A → 液晶 → 磁场B → 滤光片<img src="./LCD.png"></li>
</ul>
<hr>
<h3 id="2-像素"><a href="#2-像素" class="headerlink" title="2.像素"></a>2.像素</h3><h4 id="（1）物理像素"><a href="#（1）物理像素" class="headerlink" title="（1）物理像素"></a>（1）物理像素</h4><ul>
<li>设备出厂时，像素的大小</li>
<li>ppi 一英寸所能容纳的像素点数/点距数（1 in = 2.54 cm）</li>
<li>dpi 一英寸所能打印的墨点数</li>
</ul>
<h4 id="（2）参照像素、css像素、逻辑像素"><a href="#（2）参照像素、css像素、逻辑像素" class="headerlink" title="（2）参照像素、css像素、逻辑像素"></a>（2）参照像素、css像素、逻辑像素</h4><ul>
<li>标杆：96dpi 一臂距离的视角去看，显示出的具体大小</li>
<li>我们也管css编程的逻辑像素方式，叫做逻辑屏</li>
</ul>
<h4 id="（3）设备像素比-dpr"><a href="#（3）设备像素比-dpr" class="headerlink" title="（3）设备像素比 dpr"></a>（3）设备像素比 dpr</h4><ul>
<li>dpr = 物理像素/逻辑像素</li>
<li>在设备上，一个逻辑像素用多少个物理像素去实现</li>
</ul>
<hr>
<h3 id="3-分辨率"><a href="#3-分辨率" class="headerlink" title="3.分辨率"></a>3.分辨率</h3><ul>
<li>固定宽高下，展示的像素点数</li>
</ul>
<hr>
<h2 id="（二）layout"><a href="#（二）layout" class="headerlink" title="（二）layout"></a>（二）layout</h2><h3 id="1-浏览器渲染引擎"><a href="#1-浏览器渲染引擎" class="headerlink" title="1.浏览器渲染引擎"></a>1.浏览器渲染引擎</h3><img src="./render.png">

<h3 id="2-reflow"><a href="#2-reflow" class="headerlink" title="2.reflow"></a>2.reflow</h3><ul>
<li>改变窗口大小</li>
<li>改变文字大小</li>
<li>改变元素大小、位置</li>
<li>内容的改变、输入框输入文字</li>
<li>激活伪类，例如：hover</li>
<li>操作class属性</li>
<li>脚本操作dom</li>
<li>计算offsetWidth、offsetHeight</li>
<li>设置style属性</li>
</ul>
<h3 id="3-repaint"><a href="#3-repaint" class="headerlink" title="3.repaint"></a>3.repaint</h3><ul>
<li>改变元素背景色、文字颜色、边框颜色、不影响周围布局的属性</li>
</ul>
<h3 id="4-css3性能优化"><a href="#4-css3性能优化" class="headerlink" title="4.css3性能优化"></a>4.css3性能优化</h3><ul>
<li>will-change: transform;</li>
</ul>
<hr>
<h2 id="（三）响应式"><a href="#（三）响应式" class="headerlink" title="（三）响应式"></a>（三）响应式</h2><h3 id="1-mate"><a href="#1-mate" class="headerlink" title="1.mate"></a>1.mate</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0， user-scalable=no&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>width=device-width在iphone、ipad中横竖屏宽度一致</li>
<li>initial-scale=1.0在windows中iphone IE浏览器的横竖屏抗毒一致</li>
<li>user-scalable=no是否允许用户缩放</li>
<li>将页面大小根据不同分辨率进行调节，以示用户的大小感觉上差不多</li>
</ul>
<h3 id="2-媒体查询"><a href="#2-媒体查询" class="headerlink" title="2.媒体查询"></a>2.媒体查询</h3><ul>
<li>在不同的设备上均展示合适的页面</li>
<li>主要断点：设备宽度的临界点</li>
<li>媒体查询并不加强权重</li>
</ul>
<h3 id="3-媒体查询引用"><a href="#3-媒体查询引用" class="headerlink" title="3.媒体查询引用"></a>3.媒体查询引用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;index.css&quot;</span> <span class="attr">media</span>=<span class="string">&quot;screen and (max-width=300px)&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">media</span>=<span class="string">&quot;screen and (max-width=300px)&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="keyword">@import</span> <span class="string">&quot;index.css&quot;</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>=<span class="number">300px</span>);</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>=<span class="number">300px</span>)&#123;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>在link标签的media属性定义</li>
<li>在style标签的media属性定义</li>
<li>在@import引入语句中定义</li>
<li>在样式表内部通过@media规则定义</li>
</ul>
<h3 id="4-单位"><a href="#4-单位" class="headerlink" title="4.单位"></a>4.单位</h3><ul>
<li>px 逻辑像素</li>
<li>em 相对于自身的font-size倍数（font-size会继承）</li>
<li>rem 相对于root的font-size倍数</li>
<li>vw/vh 相对于视口宽高的均分100份</li>
<li>vmax 相对于视口宽高较大的均分100份</li>
<li>vmin 相对于视口宽高较小的均分100份</li>
</ul>
<hr>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/04/01/CSS3a/" data-id="ckya9fc0v0007ygf6199baz9a"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/css-css3/" rel="tag">css css3</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-HTML5b" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/blog/2018/03/15/HTML5b/"
    >HTML5 进阶</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/03/15/HTML5b/" class="article-date">
  <time datetime="2018-03-14T16:00:00.000Z" itemprop="datePublished">2018-03-15</time>
</a>
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h3 id="1-文本"><a href="#1-文本" class="headerlink" title="1.文本"></a>1.文本</h3><table>
<thead>
<tr>
<th align="center">元素</th>
<th align="left">语义</th>
<th align="left">浏览器默认样式</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>h1~h6</strong></td>
<td align="left">1~6级标题</td>
<td align="left">display: block; font-weight: bold; font-size: 2/1.5/1.17em; margin-block-start/end: 0.67/0.83/1em</td>
</tr>
<tr>
<td align="center"><strong>p</strong></td>
<td align="left">段落</td>
<td align="left">display: block; margin-block-start/end: 1em</td>
</tr>
<tr>
<td align="center"><strong>pre</strong></td>
<td align="left">源格式显示</td>
<td align="left">display: block; font-family: monospace; white-space: pre; margin: 1em 0px;</td>
</tr>
<tr>
<td align="center"><strong>blockquote</strong></td>
<td align="left">引用文段</td>
<td align="left">display: block; margin-block-start/end: 1em; margin-inline-start/end: 40px;</td>
</tr>
<tr>
<td align="center"><strong>q</strong></td>
<td align="left">引用短语</td>
<td align="left">display: inline; q::before{content: open-quote;} q::after{content: close-quote;}</td>
</tr>
<tr>
<td align="center"><strong>strong、b</strong></td>
<td align="left">十分重要</td>
<td align="left">font-weight: bold;</td>
</tr>
<tr>
<td align="center"><strong>em、i</strong></td>
<td align="left">人物思想</td>
<td align="left">font-style: italic;</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th align="center">实体字符</th>
<th align="center">书写形式</th>
<th align="center">展示形式</th>
</tr>
</thead>
<tbody><tr>
<td align="center">小于</td>
<td align="center"><strong>&amp;lt;</strong></td>
<td align="center">&lt;</td>
</tr>
<tr>
<td align="center">大于</td>
<td align="center"><strong>&amp;gt;</strong></td>
<td align="center">&gt;</td>
</tr>
<tr>
<td align="center">空格</td>
<td align="center"><strong>&amp;nbsp;</strong></td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td align="center">版权</td>
<td align="center"><strong>&amp;copy;</strong></td>
<td align="center">&copy;</td>
</tr>
<tr>
<td align="center">和</td>
<td align="center"><strong>&amp;amp;</strong></td>
<td align="center">&amp;</td>
</tr>
</tbody></table>
<hr>
<h3 id="2-超链接"><a href="#2-超链接" class="headerlink" title="2.超链接"></a>2.超链接</h3><h4 id="（1）href属性"><a href="#（1）href属性" class="headerlink" title="（1）href属性"></a>（1）href属性</h4><ul>
<li><p><strong>跳转链接</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p><strong>锚链接</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#chapter&quot;</span>&gt;</span>第一章<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">&quot;chapter&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>第一章<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p><strong>功能链接</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:alert(&#x27;你好！&#x27;)&quot;</span>&gt;</span>执行js代码<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;mailto:1030363645@qq.com&quot;</span>&gt;</span>发送邮件<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;tel:16608819295&quot;</span>&gt;</span>拨打电话<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（2）target属性"><a href="#（2）target属性" class="headerlink" title="（2）target属性"></a>（2）target属性</h4><ul>
<li><p><strong>默认覆盖当前窗口_self</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_self&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p><strong>在新窗口中打开_blank</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span>  <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（3）download属性"><a href="#（3）download属性" class="headerlink" title="（3）download属性"></a>（3）download属性</h4><ul>
<li>仅Chrome、Firefox支持</li>
</ul>
<h3 id="3-图片"><a href="#3-图片" class="headerlink" title="3.图片"></a>3.图片</h3><h4 id="（1）src属性（资源路径）"><a href="#（1）src属性（资源路径）" class="headerlink" title="（1）src属性（资源路径）"></a>（1）src属性（资源路径）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://www.baidu.com/logo.png&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">“”/</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>路径引入资源</li>
<li>data URL（data:MIME,base64,数据）<ul>
<li>优点：减少浏览器的请求；动态数据</li>
<li>缺点：增加资源体积（传输的内容体积会增加4/3）；不利于浏览器缓存；</li>
<li>应用：个体体积较小，不适宜使用雪碧图；图片由其它语言动态生成，且图片较小</li>
</ul>
</li>
</ul>
<h4 id="（2）alt属性（资源失效替代方案）"><a href="#（2）alt属性（资源失效替代方案）" class="headerlink" title="（2）alt属性（资源失效替代方案）"></a>（2）alt属性（资源失效替代方案）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://www.baidu.com/logo.png&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;这是一张百度logo图片&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>链接失效时，宽高也会失效（设置成块盒或行块盒）</li>
</ul>
<h4 id="（3）与a元素联用（图片实现跳转链接）"><a href="#（3）与a元素联用（图片实现跳转链接）" class="headerlink" title="（3）与a元素联用（图片实现跳转链接）"></a>（3）与a元素联用（图片实现跳转链接）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://www.baidu.com/logo.png&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>行盒里出现行块盒或行盒，自身的高度只跟字体大小有关（不会取决于内部的行盒或行块盒）</li>
</ul>
<h4 id="（4）与map元素联用（map元素可以实现指定图片不同区域跳转对应链接）"><a href="#（4）与map元素联用（map元素可以实现指定图片不同区域跳转对应链接）" class="headerlink" title="（4）与map元素联用（map元素可以实现指定图片不同区域跳转对应链接）"></a>（4）与map元素联用（map元素可以实现指定图片不同区域跳转对应链接）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://www.baidu.com/logo.png&quot;</span> <span class="attr">usemap</span>=<span class="string">&quot;#logoMap&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">map</span> <span class="attr">name</span>=<span class="string">&quot;logoMap&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;circle&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;x, y, r&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;rect&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;left-top-x, left-top-y, right-bottom-x, right-bottom-y&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;poly&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;x1, y1, x2, y2, x3, y3, x4, y4&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">map</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（5）与figure元素联用（figure元素语义化更好的将相关内容包裹起来）"><a href="#（5）与figure元素联用（figure元素语义化更好的将相关内容包裹起来）" class="headerlink" title="（5）与figure元素联用（figure元素语义化更好的将相关内容包裹起来）"></a>（5）与figure元素联用（figure元素语义化更好的将相关内容包裹起来）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">figure</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">figcaption</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">figcaption</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://www.baidu.com/logo.png&quot;</span> <span class="attr">usemap</span>=<span class="string">&quot;#logoMap&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">map</span> <span class="attr">name</span>=<span class="string">&quot;logoMap&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;circle&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;x, y, r&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;rect&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;left-top-x, left-top-y, right-bottom-x, right-bottom-y&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">&quot;poly&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;x1, y1, x2, y2, x3, y3, x4, y4&quot;</span> <span class="attr">href</span>=<span class="string">&quot;path&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">map</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">figure</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（6）常见问题"><a href="#（6）常见问题" class="headerlink" title="（6）常见问题"></a>（6）常见问题</h4><ul>
<li><p><strong>图片区域坍塌</strong></p>
<ul>
<li>链接失效时，行盒宽高也会失效</li>
<li>图片设置成块盒（行块盒）指定宽高</li>
</ul>
</li>
<li><p><strong>超链接包裹高度坍塌</strong></p>
<ul>
<li>行盒包裹行盒（行块盒），自身的高度只跟字体大小有关，不会自适应内部的行盒（行块盒）</li>
<li>超链接设置成块盒（行块盒）</li>
</ul>
</li>
<li><p><strong>块盒包裹底部白边</strong></p>
<ul>
<li>图片的基线在下外边距位置</li>
<li>块盒内部有行盒（行块盒），也会生成参考线（font-family、font-size、line-height）</li>
<li>不生成行框：某元素内没有任何行盒（行块盒）；某元素字体大小为0</li>
<li>块盒字体大小设置成0（有副作用）</li>
<li>图片设置成块盒</li>
</ul>
</li>
</ul>
<hr>
<h3 id="4-列表"><a href="#4-列表" class="headerlink" title="4.列表"></a>4.列表</h3><h4 id="（1）有序列表-ol-gt-li"><a href="#（1）有序列表-ol-gt-li" class="headerlink" title="（1）有序列表 ol &gt; li"></a>（1）有序列表 ol &gt; li</h4><h4 id="（2）无序列表-ul-gt-li"><a href="#（2）无序列表-ul-gt-li" class="headerlink" title="（2）无序列表 ul &gt; li"></a>（2）无序列表 ul &gt; li</h4><h4 id="（3）定义列表-dl-gt-dt-dd"><a href="#（3）定义列表-dl-gt-dt-dd" class="headerlink" title="（3）定义列表 dl &gt; dt/dd"></a>（3）定义列表 dl &gt; dt/dd</h4><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">属性值</th>
<th align="left">含义</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>display</strong></td>
<td align="left">list-item</td>
<td align="left">仍然是块盒，但会生成一个附带的次盒子</td>
<td align="left">次盒子排列在前（可继承）</td>
</tr>
<tr>
<td align="left"><strong>list-style</strong></td>
<td align="left">none</td>
<td align="left">设置次盒子样式</td>
<td align="left">清空次盒子</td>
</tr>
</tbody></table>
<h3 id="5-表单"><a href="#5-表单" class="headerlink" title="5.表单"></a>5.表单</h3><h4 id="（1）input元素（输入框）"><a href="#（1）input元素（输入框）" class="headerlink" title="（1）input元素（输入框）"></a>（1）input元素（输入框）</h4><ul>
<li><strong>type属性：输入框类型</strong><ul>
<li>text文本输入框</li>
<li>password 密码输入框</li>
<li>date 日期选择框（兼容性问题）</li>
<li>search 搜索框（兼容性问题）</li>
<li>range 滑块（兼容性问题）</li>
<li>color 颜色选择（兼容性问题）</li>
<li>number 数字输入框（兼容性问题）</li>
<li>CheckBox 多选框</li>
<li>radio 单选框</li>
<li>file 文件选择器</li>
<li>reset 重置按钮</li>
<li>button 点击按钮</li>
</ul>
</li>
<li><strong>value 输入框的内容</strong></li>
<li><strong>placeholder 提示内容</strong></li>
<li><strong>name限定（同一题）</strong></li>
</ul>
<h4 id="（2）select元素（下拉列表）"><a href="#（2）select元素（下拉列表）" class="headerlink" title="（2）select元素（下拉列表）"></a>（2）select元素（下拉列表）</h4><ul>
<li>option 选项：value 属性定义选中内容（元素内容仅仅是展示）</li>
<li>optgroup 分组：label 属性定义组名<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">optgroup</span> <span class="attr">label</span>=<span class="string">&quot;city&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;hongkong&quot;</span>&gt;</span>beijing<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;hongkong&quot;</span>&gt;</span>beijing<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;hongkong&quot;</span>&gt;</span>beijing<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">optgroup</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（3）textarea元素（文本域）"><a href="#（3）textarea元素（文本域）" class="headerlink" title="（3）textarea元素（文本域）"></a>（3）textarea元素（文本域）</h4><ul>
<li>特殊：元素显示内容由元素内容决定，无value属性</li>
<li>不会发生空白折叠</li>
</ul>
<h4 id="（4）button元素（按钮）"><a href="#（4）button元素（按钮）" class="headerlink" title="（4）button元素（按钮）"></a>（4）button元素（按钮）</h4><ul>
<li>type属性<ul>
<li>reset 重置</li>
<li>submit 提交（默认）</li>
<li>button 普通按钮</li>
</ul>
</li>
</ul>
<h4 id="（5）表单附属元素"><a href="#（5）表单附属元素" class="headerlink" title="（5）表单附属元素"></a>（5）表单附属元素</h4><h5 id="1）label元素（聚焦关联）"><a href="#1）label元素（聚焦关联）" class="headerlink" title="1）label元素（聚焦关联）"></a>1）label元素（聚焦关联）</h5><ul>
<li><p>显式关联</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;male&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;male&quot;</span>&gt;</span>男<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>隐式关联</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>男<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="2）datalist元素-输入提示"><a href="#2）datalist元素-输入提示" class="headerlink" title="2）datalist元素(输入提示)"></a>2）datalist元素(输入提示)</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">请输入你常用的浏览器？</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">list</span>=<span class="string">&quot;userargent&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;userargent&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;firefox&quot;</span>&gt;</span>火狐<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Chrome&quot;</span>&gt;</span>谷歌<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Safari&quot;</span>&gt;</span>苹果<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;Opera&quot;</span>&gt;</span>欧朋<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="3）form元素（包裹表单）"><a href="#3）form元素（包裹表单）" class="headerlink" title="3）form元素（包裹表单）"></a>3）form元素（包裹表单）</h5><ul>
<li>action 属性提交地址</li>
<li>method 属性传递方式<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span> <span class="attr">method</span>=<span class="string">&quot;GET&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="4）fieldset元素（表单分组）"><a href="#4）fieldset元素（表单分组）" class="headerlink" title="4）fieldset元素（表单分组）"></a>4）fieldset元素（表单分组）</h5><ul>
<li>legend 分组标题（子元素）<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">legend</span>&gt;</span>用户信息<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">  账号：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line">  密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="5）表单状态"><a href="#5）表单状态" class="headerlink" title="5）表单状态"></a>5）表单状态</h5><ul>
<li>readonly属性 只读</li>
<li>disabled属性 禁用</li>
</ul>
<h4 id="（6）美化表单元素"><a href="#（6）美化表单元素" class="headerlink" title="（6）美化表单元素"></a>（6）美化表单元素</h4><h5 id="1）聚焦-focus"><a href="#1）聚焦-focus" class="headerlink" title="1）聚焦 :focus"></a>1）聚焦 :focus</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span>&#123;</span><br><span class="line">  <span class="attribute">outline-offset</span>: none;<span class="comment">/*外边框偏移量*/</span></span><br><span class="line">  <span class="attribute">outline</span>: <span class="number">1px</span> solid red;<span class="comment">/*外边框样式*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="2）选中-checked"><a href="#2）选中-checked" class="headerlink" title="2）选中 :checked"></a>2）选中 :checked</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:checked</span>+<span class="selector-tag">label</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="3）文本域的尺寸调整"><a href="#3）文本域的尺寸调整" class="headerlink" title="3）文本域的尺寸调整"></a>3）文本域的尺寸调整</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">textarea</span>&#123;</span><br><span class="line">  <span class="attribute">resize</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="4）文本框边缘到内容的距离调整"><a href="#4）文本框边缘到内容的距离调整" class="headerlink" title="4）文本框边缘到内容的距离调整"></a>4）文本框边缘到内容的距离调整</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>&#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">text-indent</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="5）单选-多选框的样式美化"><a href="#5）单选-多选框的样式美化" class="headerlink" title="5）单选/多选框的样式美化"></a>5）单选/多选框的样式美化</h5><ul>
<li>原生的单选/多选样式无法用css来设置（取决于系统/浏览器）</li>
<li>用普通元素模拟出想要的样子（舍弃原生的单选/多选框）</li>
</ul>
<hr>
<h3 id="6-表格"><a href="#6-表格" class="headerlink" title="6.表格"></a>6.表格</h3><h4 id="（1）tabel"><a href="#（1）tabel" class="headerlink" title="（1）tabel"></a>（1）tabel</h4><ul>
<li>caption 标题</li>
<li>thead 表头</li>
<li>tbody 表体</li>
<li>tfoot 表尾<ul>
<li>tr 行<ul>
<li>th 单元格（标题）</li>
<li>td 单元格（内容）</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="（2）单元格合并"><a href="#（2）单元格合并" class="headerlink" title="（2）单元格合并"></a>（2）单元格合并</h4><ul>
<li><strong>跨列</strong><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;5&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><strong>跨行</strong><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">&quot;5&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="7-多媒体"><a href="#7-多媒体" class="headerlink" title="7.多媒体"></a>7.多媒体</h3><h4 id="（1）视频-video"><a href="#（1）视频-video" class="headerlink" title="（1）视频 video"></a>（1）视频 video</h4><h4 id="（2）音频-audio"><a href="#（2）音频-audio" class="headerlink" title="（2）音频 audio"></a>（2）音频 audio</h4><table>
<thead>
<tr>
<th align="center">属性名</th>
<th align="center">属性值</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>controls</strong></td>
<td align="center">control</td>
<td align="center">控件</td>
</tr>
<tr>
<td align="center"><strong>autoplay</strong></td>
<td align="center">默认false</td>
<td align="center">自动播放</td>
</tr>
<tr>
<td align="center"><strong>muted</strong></td>
<td align="center">默认false</td>
<td align="center">静音播放</td>
</tr>
<tr>
<td align="center"><strong>loop</strong></td>
<td align="center">默认false</td>
<td align="center">循环播放</td>
</tr>
</tbody></table>
<ul>
<li><p>video.paused 是否处于暂停状态（true/false）</p>
</li>
<li><p>video.pause()暂停</p>
</li>
<li><p>video.play()播放</p>
</li>
<li><p>video.duration总时间（s）</p>
</li>
<li><p>video.currentTime当前时间（s）</p>
</li>
<li><p>video.playbackRate速率</p>
</li>
<li><p>video.volume音量（0-1）</p>
</li>
<li><p>requestFullscreen()</p>
</li>
<li><p><strong>正常</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">control</span> <span class="attr">autoplay</span> <span class="attr">muted</span> <span class="attr">loop</span> <span class="attr">src</span>=<span class="string">&quot;./videoes/game.mp4&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p><strong>兼容</strong>（旧版本浏览器不支持，各浏览器支持格式不一样）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">control</span> <span class="attr">autoplay</span> <span class="attr">muted</span> <span class="attr">loop</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.mp4&quot;</span>&gt;</span> </span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;video.webm&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>对不起！你的浏览器不支持，请下载最新浏览器...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="8-嵌入"><a href="#8-嵌入" class="headerlink" title="8.嵌入"></a>8.嵌入</h3><h4 id="（1）iframe元素-框架页"><a href="#（1）iframe元素-框架页" class="headerlink" title="（1）iframe元素(框架页)"></a>（1）iframe元素(框架页)</h4><ul>
<li><strong>属性</strong><ul>
<li>src 资源地址</li>
<li>name 通常与a元素target联用</li>
<li>scrolling 滚动条</li>
<li>frameborder 边框</li>
<li>framespacing 空隙</li>
<li>allowfullscreen 全屏<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">src</span>=<span class="string">&quot;www.baidu.com&quot;</span> <span class="attr">target</span>=<span class="string">&quot;my-iframe&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">name</span>=<span class="string">&quot;my-iframe&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">&quot;//player.bilibili.com&quot;</span> <span class="attr">scrolling</span>=<span class="string">&quot;no&quot;</span> <span class="attr">border</span>=<span class="string">&quot;0&quot;</span> <span class="attr">frameborder</span>=<span class="string">&quot;no&quot;</span> <span class="attr">framespacing</span>=<span class="string">&quot;0&quot;</span> <span class="attr">allowfullscreen</span>=<span class="string">&quot;true&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="（2）在页面中使用flash-swf"><a href="#（2）在页面中使用flash-swf" class="headerlink" title="（2）在页面中使用flash(.swf)"></a>（2）在页面中使用flash(.swf)</h4><ul>
<li><strong>object元素</strong><ul>
<li>data 资源地址</li>
<li>type 多用途互联网邮件类型（MIME）</li>
<li>param 子元素（参数）</li>
<li>embed 子元素（兼容）<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">object</span> <span class="attr">data</span>=<span class="string">&quot;./game.swf&quot;</span> <span class="attr">type</span>=<span class="string">&quot;application/x-shockwave-flash&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">param</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">embed</span> <span class="attr">data</span>=<span class="string">&quot;./game.swf&quot;</span> <span class="attr">type</span>=<span class="string">&quot;application/x-shockwave-flash&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">object</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<hr>
<h3 id="9-svg"><a href="#9-svg" class="headerlink" title="9.svg"></a>9.svg</h3><h4 id="（1）特点"><a href="#（1）特点" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>该图片由代码书写而成</li>
<li>缩放不会失真</li>
<li>内容轻量</li>
<li>xml语言格式</li>
</ul>
<h4 id="（2）使用"><a href="#（2）使用" class="headerlink" title="（2）使用"></a>（2）使用</h4><ul>
<li><p>嵌入浏览器</p>
<ul>
<li>代码</li>
</ul>
</li>
<li><p>单独成为一个文件</p>
<ul>
<li>img</li>
<li>background-img</li>
<li>embed</li>
<li>object</li>
<li>iframe</li>
</ul>
</li>
</ul>
<h4 id="（3）元素"><a href="#（3）元素" class="headerlink" title="（3）元素"></a>（3）元素</h4><ul>
<li><p>rect矩形</p>
<ul>
<li>x/y起始点坐标</li>
<li>width/height宽高</li>
<li>fill填充</li>
<li>stroke描边</li>
</ul>
</li>
<li><p>circle圆形</p>
<ul>
<li>cx/cy圆心点坐标</li>
<li>r半径</li>
</ul>
</li>
<li><p>ellipse椭圆</p>
<ul>
<li>cx/cy圆心点坐标</li>
<li>rx/ry半径</li>
</ul>
</li>
<li><p>line线段</p>
<ul>
<li>x1/y1起始点坐标</li>
<li>x2/y2终点坐标</li>
<li>stroke描边</li>
</ul>
</li>
<li><p>polyline折线</p>
<ul>
<li>points坐标点对</li>
<li>stroke描边</li>
</ul>
</li>
<li><p>polygon多边形</p>
<ul>
<li>points坐标点对</li>
<li>fill填充</li>
</ul>
</li>
</ul>
<h4 id="（4）path路径"><a href="#（4）path路径" class="headerlink" title="（4）path路径"></a>（4）path路径</h4><ul>
<li>d 路径命令（大写表示绝对定位，小写表示相对定位）<ul>
<li>M = moveto</li>
<li>L = lineto</li>
<li>H = horizontal lineto</li>
<li>V = vertical lineto</li>
<li>C = curveto</li>
<li>S = smooth curveto</li>
<li>Q = quadratic Bézier curve</li>
<li>T = smooth quadratic Bézier curveto</li>
<li>A = elliptical Arc</li>
<li>Z = closepath </li>
</ul>
</li>
<li>fill填充</li>
<li>stroke描边</li>
</ul>
<hr>
<h3 id="10-canvas"><a href="#10-canvas" class="headerlink" title="10.canvas"></a>10.canvas</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">width</span>=<span class="string">&quot;500px&quot;</span> <span class="attr">height</span>=<span class="string">&quot;500px&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//画布</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> canvas = <span class="built_in">document</span>.getElementById();</span></span><br><span class="line"><span class="javascript">  <span class="comment">//画笔</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">&quot;2d&quot;</span>);</span></span><br><span class="line"><span class="javascript">  <span class="comment">//移动画笔</span></span></span><br><span class="line"><span class="javascript">  ctx.moveTo(x, y);</span></span><br><span class="line"><span class="javascript">  <span class="comment">//画笔粗细</span></span></span><br><span class="line"><span class="javascript">  ctx.lineWidth = <span class="number">10</span>;</span></span><br><span class="line"><span class="javascript">  <span class="comment">//开启路径</span></span></span><br><span class="line"><span class="javascript">  ctx.beginPath();</span></span><br><span class="line"><span class="javascript">  <span class="comment">//闭合路径</span></span></span><br><span class="line"><span class="javascript">  ctx.closePath();</span></span><br><span class="line"><span class="javascript">  <span class="comment">//描边</span></span></span><br><span class="line"><span class="javascript">  ctx.stroke();</span></span><br><span class="line"><span class="javascript">  <span class="comment">//填充</span></span></span><br><span class="line"><span class="javascript">  ctx.fill();</span></span><br><span class="line"><span class="javascript">  <span class="comment">//橡皮擦</span></span></span><br><span class="line"><span class="javascript">  ctx.clearRect(x1, y1, x2, y2);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//矩形</span></span></span><br><span class="line"><span class="javascript">  ctx.rect(x, y, w, h); <span class="comment">//路径</span></span></span><br><span class="line"><span class="javascript">  ctx.strokeRect(x, y, w, h); <span class="comment">//描边矩形</span></span></span><br><span class="line"><span class="javascript">  ctx.fillRect(x, y, w, h); <span class="comment">//填充矩形</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//弧形</span></span></span><br><span class="line"><span class="javascript">  ctx.arc(ox, oy, r, begin, end, dirction);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//圆角矩形</span></span></span><br><span class="line"><span class="javascript">  ctx.arcTo(x, y, dx, dy, r);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//二次贝塞尔</span></span></span><br><span class="line"><span class="javascript">  ctx.quadraticCurveTo(x1, y1, x, y);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//三次贝塞尔</span></span></span><br><span class="line"><span class="javascript">  ctx.bezierCurveTo(x1, y1, x2, y2, x, y);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//平移坐标系</span></span></span><br><span class="line"><span class="javascript">  ctx.translate(x, y);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//旋转</span></span></span><br><span class="line"><span class="javascript">  ctx.rotate(<span class="built_in">Math</span>.PI / <span class="number">2</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//缩放</span></span></span><br><span class="line"><span class="javascript">  ctx.scale(<span class="number">1</span>, <span class="number">1</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//保存坐标系状态</span></span></span><br><span class="line"><span class="javascript">  ctx.save();</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//恢复坐标系状态</span></span></span><br><span class="line"><span class="javascript">  ctx.restore();</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//纹理</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> img = <span class="keyword">new</span> Image();</span></span><br><span class="line"><span class="javascript">  img.src = <span class="string">&quot;index.png&quot;</span>;</span></span><br><span class="line"><span class="javascript">  img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> bg = ctx.createPattern(img);</span></span><br><span class="line"><span class="javascript">    ctx.fillStyle = bg;</span></span><br><span class="line"><span class="javascript">    ctx.fill();</span></span><br><span class="line"><span class="javascript">  &#125;;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//线性渐变</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> bg = ctx.createLinearGradient(x1, y1, x2, y2);</span></span><br><span class="line"><span class="javascript">  bg.addColorStop(<span class="number">0</span>, <span class="string">&quot;red&quot;</span>);</span></span><br><span class="line"><span class="javascript">  bg.addColorStop(<span class="number">1</span>, <span class="string">&quot;blue&quot;</span>);</span></span><br><span class="line"><span class="javascript">  ctx.fillStyle = bg;</span></span><br><span class="line"><span class="javascript">  ctx.fill();</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//径向渐变</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> bg = ctx.createRedialGradient(ox1, oy1, r1, ox2, oy2, r2);</span></span><br><span class="line"><span class="javascript">  bg.addColorStop(<span class="number">0</span>, <span class="string">&quot;red&quot;</span>);</span></span><br><span class="line"><span class="javascript">  bg.addColorStop(<span class="number">1</span>, <span class="string">&quot;blue&quot;</span>);</span></span><br><span class="line"><span class="javascript">  ctx.fillStyle = bg;</span></span><br><span class="line"><span class="javascript">  ctx.fill();</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h4 id="1-初始化"><a href="#1-初始化" class="headerlink" title="1)初始化"></a>1)初始化</h4><ul>
<li>创建画布</li>
<li><font color=red size=5>html 中 canvas 标签指定 3 个属性 id 标识、width 画布宽度、height 画布高度</font></li>
<li>获取画布</li>
<li><font color=red size=5>var canvas = document.getElementById()</font></li>
<li>获取画笔</li>
<li><font color=red size=5>var ctx = canvas.getContext(“2d”)</font></li>
</ul>
<hr>
<h4 id="2-线性路径"><a href="#2-线性路径" class="headerlink" title="2)线性路径"></a>2)线性路径</h4><ul>
<li>创建路径</li>
<li><font color=red size=5>ctx.beginPath()</font></li>
<li>画笔粗细</li>
<li><font color=red size=5>ctx.lineWidth = num</font></li>
<li>线端样式</li>
<li><font color=red size=5>ctx.lineCap = “button”/“square”/“round”</font></li>
<li><font color=red size=5>ctx.lineJoin = “miter”/“bevel”/“round”</font></li>
<li>画笔定位</li>
<li><font color=red size=5>ctx.moveTo(x, y)</font></li>
<li>画线</li>
<li><font color=red size=5>ctx.lineTo(x, y)</font></li>
<li>闭合路径</li>
<li><font color=red size=5>ctx.closePath()</font></li>
<li>描边</li>
<li><font color=red size=5>ctx.strokeStyle = “red”</font></li>
<li><font color=red size=5>ctx.stroke()</font></li>
<li>填充</li>
<li><font color=red size=5>ctx.fillStyle = “red”</font></li>
<li><font color=red size=5>ctx.fill()</font></li>
<li>擦除</li>
<li><font color=red size=5>ctx.clearRect(x,y,w,h)</font></li>
</ul>
<hr>
<h4 id="3-基础图形路径"><a href="#3-基础图形路径" class="headerlink" title="3)基础图形路径"></a>3)基础图形路径</h4><h5 id="lt-1-gt-rect-矩形"><a href="#lt-1-gt-rect-矩形" class="headerlink" title="&lt;1&gt;rect 矩形"></a>&lt;1&gt;rect 矩形</h5><ul>
<li><font color=red size=5>ctx.rect(x, y, w, h)</font><img src="./rect.png" width=300></li>
</ul>
<h5 id="lt-2-gt-arc-弧形（圆形）"><a href="#lt-2-gt-arc-弧形（圆形）" class="headerlink" title="&lt;2&gt; arc 弧形（圆形）"></a>&lt;2&gt; arc 弧形（圆形）</h5><ul>
<li><font color=red size=5>ctx.arc(ox, oy, r, begin, end, dirction)</font><img src="./arc.png" width=300></li>
</ul>
<h5 id="lt-3-gt-arcTo-圆角"><a href="#lt-3-gt-arcTo-圆角" class="headerlink" title="&lt;3&gt; arcTo 圆角"></a>&lt;3&gt; arcTo 圆角</h5><ul>
<li><font color=red size=5>ctx.arcTo(x, y, dx, dy, r)</font><img src="./arcTo.png" width=300></li>
</ul>
<hr>
<h4 id="4-贝塞尔曲线"><a href="#4-贝塞尔曲线" class="headerlink" title="4)贝塞尔曲线"></a>4)贝塞尔曲线</h4><h5 id="lt-1-gt-二次贝塞尔"><a href="#lt-1-gt-二次贝塞尔" class="headerlink" title="&lt;1&gt; 二次贝塞尔"></a>&lt;1&gt; 二次贝塞尔</h5><ul>
<li><font color=red size=5>ctx.quadraticCurveTo(x1, y1, x, y)</font></li>
<li>从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(x1, y1)作为控制点</li>
</ul>
<h5 id="lt-2-gt-三次贝塞尔"><a href="#lt-2-gt-三次贝塞尔" class="headerlink" title="&lt;2&gt; 三次贝塞尔"></a>&lt;2&gt; 三次贝塞尔</h5><ul>
<li><font color=red size=5>ctx.bezierCurveTo(x1, y1, x2, y2, x, y)</font></li>
<li>从上一个点开始绘制一条曲线，到(x, y)为止，并且以(x1, y1)和(x2, y2)为控制点</li>
</ul>
<hr>
<h4 id="5-坐标系控制"><a href="#5-坐标系控制" class="headerlink" title="5)坐标系控制"></a>5)坐标系控制</h4><ul>
<li>==全局控制==</li>
</ul>
<h5 id="lt-1-gt-translate-平移坐标系原点"><a href="#lt-1-gt-translate-平移坐标系原点" class="headerlink" title="&lt;1&gt; translate 平移坐标系原点"></a>&lt;1&gt; translate 平移坐标系原点</h5><ul>
<li><font color=red size=5>ctx.translate(x, y)</font></li>
<li>原坐标系原点在画布左上角点</li>
</ul>
<h5 id="lt-2-gt-rotate-旋转路径"><a href="#lt-2-gt-rotate-旋转路径" class="headerlink" title="&lt;2&gt; rotate 旋转路径"></a>&lt;2&gt; rotate 旋转路径</h5><ul>
<li><font color=red size=5>ctx.rotate(Math.PI)</font></li>
<li>相对于坐标原点进行旋转</li>
</ul>
<h5 id="lt-3-gt-scale-路径缩放"><a href="#lt-3-gt-scale-路径缩放" class="headerlink" title="&lt;3&gt; scale 路径缩放"></a>&lt;3&gt; scale 路径缩放</h5><ul>
<li><font color=red size=5>ctx.scale(x, y)</font></li>
<li>每个点的位置进行相应倍数的缩放</li>
</ul>
<h5 id="lt-4-gt-save-restore-保存、恢复坐标系状态数据"><a href="#lt-4-gt-save-restore-保存、恢复坐标系状态数据" class="headerlink" title="&lt;4&gt; save/restore 保存、恢复坐标系状态数据"></a>&lt;4&gt; save/restore 保存、恢复坐标系状态数据</h5><ul>
<li><font color=red size=5>ctx.save()</font></li>
<li>保存坐标系状态（平移、旋转、缩放）</li>
<li><font color=red size=5>ctx.restore()</font></li>
<li>恢复保存时的坐标系状态</li>
</ul>
<hr>
<h4 id="6-特殊填充效果"><a href="#6-特殊填充效果" class="headerlink" title="6)特殊填充效果"></a>6)特殊填充效果</h4><ul>
<li><font color=red size=5>从坐标系原点开始填充</font></li>
</ul>
<h5 id="lt-1-gt-createPattern-纹理"><a href="#lt-1-gt-createPattern-纹理" class="headerlink" title="&lt;1&gt; createPattern 纹理"></a>&lt;1&gt; createPattern 纹理</h5><ul>
<li><font color=red size=5>ctx.createPattern(img)</font></li>
</ul>
<h5 id="lt-2-gt-createLinearGradient-线性渐变"><a href="#lt-2-gt-createLinearGradient-线性渐变" class="headerlink" title="&lt;2&gt; createLinearGradient 线性渐变"></a>&lt;2&gt; createLinearGradient 线性渐变</h5><ul>
<li><font color=red size=5>ctx.createLinearGradient(x1,y1,x2,y2)</font></li>
<li><font color=red size=5>bg.addColorStop(0, “red”)</font></li>
<li><font color=red size=5>bg.addColorStop(1, “blue”)</font></li>
</ul>
<h5 id="lt-3-gt-createRedialGradient-径向渐变"><a href="#lt-3-gt-createRedialGradient-径向渐变" class="headerlink" title="&lt;3&gt; createRedialGradient 径向渐变"></a>&lt;3&gt; createRedialGradient 径向渐变</h5><ul>
<li><font color=red size=5>ctx.createRedialGradient(x1,y1,r1, x2,y2,r2)</font></li>
<li><font color=red size=5>bg.addColorStop(0, “red”)</font></li>
<li><font color=red size=5>bg.addColorStop(1, “blue”)</font></li>
</ul>
<hr>
<h4 id="7）阴影"><a href="#7）阴影" class="headerlink" title="7）阴影"></a>7）阴影</h4><ul>
<li>阴影颜色</li>
<li><font color=red size=5>ctx.shadowColor = color</font></li>
<li>模糊半径</li>
<li><font color=red size=5>ctx.shadowBlur = num</font></li>
<li>偏移量</li>
<li><font color=red size=5>ctx.shadowOffsetX = num</font></li>
<li><font color=red size=5>ctx.shadowOffsetY = num</font></li>
</ul>
<hr>

      
      <!-- 打赏 -->
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/03/15/HTML5b/" data-id="ckya9fc11000fygf6azbegems"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/html-h5/" rel="tag">html h5</a></li></ul>

    </footer>

  </div>

  

  
  
  

  

</article>
    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/blog/">上一页</a><a class="page-number" href="/blog/">1</a><span class="page-number current">2</span><a class="page-number" href="/blog/page/3/">3</a><a class="extend next" rel="next" href="/blog/page/3/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
      <aside class="sidebar">
        
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>





<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>